Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flutter codelab @ PickStar

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

Thais Aquino

March 03, 2020
Tweet

More Decks by Thais Aquino

Other Decks in Technology

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. 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
  4. 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
  5. 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'), ), ), ); } }
  6. 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
  7. 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.
  8. 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. ), ), ); }
  9. 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
  10. 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); } }
  11. 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. ), ), );
  12. 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); ... }
  13. 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]); } ); }
  14. Add this function to the RandomWordsState too Widget _buildRow(WordPair pair)

    { return ListTile( title: Text( pair.asPascalCase, style: _biggerFont, ), ); }
  15. 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. }
  16. Change the build method of MyApp to use the RandomWords

    widget @override Widget build(BuildContext context) { return MaterialApp( title: 'Startup Name Generator', home: RandomWords(), ); }