Flutter codelab @ PickStar

First codelab in GDG Adelaide \o/ @ PickStar in 03/03/2020.
This codelab provides a guide to write a first app in Flutter that displays an endless list.
It covers:

- Basic structure of a Flutter app
- Finding and using packages to
extend functionality
- Using hot reload for a quicker
development cycle
- How to implement a stateful widget
- How to create an infinite, lazily
loaded list

Transcript

1. Flutter codelab Thais Aquino TL/Android/Flutter developer from GDG Adelaide @thaisandrade_s Darragh Kearns Developer @ PickStar @darramundi Jake Gillingham Developer @ PickStar
2. Build an app with an endless scroll • Basic structure of a Flutter app • Finding and using packages to extend functionality • Using hot reload for a quicker development cycle • How to implement a stateful widget • How to create an infinite, lazily loaded list
3. Basic structure of a Flutter APP
4. 1. Open the IDE and select Start a new Flutter project. 2. Select Flutter Application as the project type. Then click Next. 3. Verify the Flutter SDK path specifies the SDK’s location (select Install SDK… if the text field is blank). 4. Enter a project name (for example, myapp). Then click Next. 5. Click Finish. 6. Wait for Android Studio to install the SDK and create the project. Creating the project structure
5. Project structure android : project that has all android specifics iOS: project that has all iOS specifics lib: dart code test: test your dart code pubspec.yaml: configuration of your project and where to add the dependencies to external packages/libraries
6. Remove all the code that comes and replace by: main.dart import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: const Text('Welcome to Flutter'), ), body: const Center( child: const Text('Hello World'), ), ), ); } }
7. Finding and using packages https://pub.dev/packages/english_words
8. Add this dependency pubspec.yaml dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 english_words: ^3.1.5 # add this line Click on Packages Get to update the project with the new dependency
9. Go to main.dart and add the import to the new package main.dart import 'package:flutter/material.dart'; import 'package:english_words/english_words.dart'; // Add this line.
10. Still in main.dart do the following changes (in orange) main.dart import 'package:flutter/material.dart'; import 'package:english_words/english_words.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final wordPair = WordPair.random(); // Add this line. return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('Welcome to Flutter'), ), body: Center( //child: Text('Hello World'), // Replace this text... child: Text(wordPair.asPascalCase), // With this text. ), ), ); }
11. How to implement a StatefulWidget Stateful widgets maintain state that might change during the lifetime of the widget. Implementing a stateful widget requires at least two classes: The StatefulWidget and the State We will create: RandomWords and RandomWordsState
12. Add these 2 classes to main.dart main.dart class RandomWords extends StatefulWidget { @override RandomWordsState createState() => RandomWordsState(); } class RandomWordsState extends State<RandomWords> { @override Widget build(BuildContext context) { final WordPair wordPair = WordPair.random(); return Text(wordPair.asPascalCase); } }
13. Change the implementation to use the Widget you created main.dart class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final WordPair wordPair = WordPair.random(); // Delete this line. return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('Welcome to Flutter'), ), body: Center( //child: Text(wordPair.asPascalCase), // Change this line to... child: RandomWords(), // ... this line. ), ), );
14. How to create an endless scroll list
15. Changing main.dart to display the endless list class RandomWordsState extends State<RandomWords> { // Add the next two lines. final List<WordPair> _suggestions = <WordPair>[]; final TextStyle _biggerFont = const TextStyle(fontSize: 18); ... }
16. Add this _buildSuggestions to the RandomWordsState Widget _buildSuggestions() { return ListView.builder( padding: const EdgeInsets.all(16), itemBuilder: (BuildContext _context, int i) { if (i.isOdd) { return Divider(); } final int index = i ~/ 2; // If you've reached the end of the available word // pairings... if (index >= _suggestions.length) { // ...then generate 10 more and add them to the // suggestions list. _suggestions.addAll(generateWordPairs().take(10)); } return _buildRow(_suggestions[index]); } ); }
17. Add this function to the RandomWordsState too Widget _buildRow(WordPair pair) { return ListTile( title: Text( pair.asPascalCase, style: _biggerFont, ), ); }
18. Change RandomWordsState to use the _buildSuggestions() @override Widget build(BuildContext context) { //final wordPair = WordPair.random(); // Delete these... //return Text(wordPair.asPascalCase); // ... two lines. return Scaffold ( // Add from here... appBar: AppBar( title: Text('Startup Name Generator'), ), body: _buildSuggestions(), ); // ... to here. }
19. Change the build method of MyApp to use the RandomWords widget @override Widget build(BuildContext context) { return MaterialApp( title: 'Startup Name Generator', home: RandomWords(), ); }
20. Thank you github.com/tasaquino/flutter_initial_codelab