Dart 2 - Build App with Google's Flutter & Dart

By Sheldon L

Published at 2020-03-11

Updated at 2020-03-11

---

Flutter

Video - RandomWord

Video - More Apps

Installation

• AndroidStudio 1 - Installation and Start an Emulator

• Following the Documentation to install flutter

cd ~/Downloads
wget https://storage.googleapis.com/flutter_infra/releases/stable/linux/flutter_linux_v1.12.13+hotfix.8-stable.tar.xz

cd ~
tar xf ~/Downloads/flutter_linux_v1.12.13+hotfix.8-stable.tar.xz

export PATH="$PATH:`pwd`/flutter/bin"  # add it to PATH

• Run flutter precache.

• Run flutter doctor. Trouble shooting:

  • IF ERROR Android license status unknown OCCOR, MAKE SURE:

    • Do Trouble Shooing in Android 1 - Start an Emulator in Android Studio

    • run flutter doctor --android-licenses.

• Install Flutter plugin and Dart plugin in Android Studio Plugin.

Start a Project

• Lunch an Android Emulaor;
  • “Transport Files”
  • “Allow Debugging”
• Create a project.

cd $hub/mysite_test/dart_flutter
flutter create flutter_demo

cd flutter_demo
code .

• Install Flutter plugin and Dart plugin in VSCode, then click no divce in bottom right, select an Emulator.

• Choose a device in bottom-right

• Run - Start Debuging - Choose Dart and Flutter, Flutter Demo Home Page will show.

Demo - RandomWords()

• lib/main.dart, MaterialApp: https://api.flutter.dev/flutter/material/MaterialApp-class.html

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    // MaterialApp: https://api.flutter.dev/flutter/material/MaterialApp-class.html
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'), // Change to `RandomWords()` later
    );
  }
}

• Install Dart Package, such as https://pub.dev/packages/english_words#-installing-tab-

• lib/random_words.dart

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';


class RandomWords extends StatefulWidget {

  @override
  RandomWordsState createState() => RandomWordsState();
}


class RandomWordsState extends State<RandomWords> {

  final _randomWordPairs = List <WordPair> ();

  final _savedWordPairs = Set <WordPair> ();

  // ListView: https://api.flutter.dev/flutter/widgets/ListView-class.html
  Widget _buildList() {
    return ListView.builder(
      padding: const EdgeInsets.all(16),
      itemBuilder: (context, item) {

        if (item.isOdd) return Divider();

        final index = item ~/ 2;
        if (index >= _randomWordPairs.length) {
          _randomWordPairs.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_randomWordPairs[index]);
      },
    );
  }
  

  Widget _buildRow(WordPair pair) {

    final alreadySaved = _savedWordPairs.contains(pair);

    return ListTile(
      title: Text(pair.asPascalCase, style: TextStyle(fontSize: 18),),
      trailing: Icon(
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
      ),
      onTap: () {
        setState(() {
          if (alreadySaved) {
            _savedWordPairs.remove(pair);
          } else {
            _savedWordPairs.add(pair);
          }
        });
      },
    );
  }

  void _pushSaved() {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (BuildContext context) {
          final Iterable<ListTile> titles = _savedWordPairs.map((WordPair pair) {
            return ListTile(
              title: Text(pair.asPascalCase, style: TextStyle(fontSize: 16))
            );
          });

          final List<Widget> divided = ListTile.divideTiles(
            tiles: titles,
            context: context,
          ).toList();

          return Scaffold(
            appBar: AppBar(
              title: Text('Saved WordPairs'),
            ),
            body: ListView(children: divided,),
          );
        }
      )
    );
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WordPair Generator'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.list),
            onPressed: _pushSaved,
          )
        ],
      ),
      body: _buildList(),
    );
  }
}