Flutter] Just Do it! (Basic Series 1-2 Navigates The Favorited)

Development Environment

Os : Windows 10 (64-bit)

Android Studio Version : android-studio-ide-182.5314842-windows.exe

Flutter Version : flutter_windows_v1.2.1-stable

Device : Redmi Note 5 or Virtual Device

*If u didn't install Android Studio, plz Install : https://witch-dp.tistory.com/39

*If u didn't install Flutter , plz Install : https://witch-dp.tistory.com/40

*If u didn't connect Device, plz Connect : https://witch-dp.tistory.com/41

*If u didn't setting, plz setting: https://witch-dp.tistory.com/42

({doit2}/lib/main.dart)

Just Do it! Step

 1: Add icons to the list

 2: Add interactivity

 3: Navigate to a new screen

 4: Change the UI using Themes

 5: Change Icon and Themes color

1. Add icons to the list

 -Change Code (main.dart)

 : class MyApp -> title

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Just Do it! 2',
      home: RandomWords(),
    );
  }
}

 - Add Code (main.dart)

 : class RandomWordsState -> _saved => save to icon at list

final Set<WordPair> _saved = new Set<WordPair>(); // Add this line.

 - Add Code (main.dart)

 : class RandomWordsState -> _buildRow -> alreadySaved => save to icon at list

final bool alreadySaved = _saved.contains(pair);  // Add this line.

 - Add Code (main.dart)

 : class RandomWordsState -> _buildRow -> ListTile -> trailing => icon properties

trailing: new Icon(   // Add the lines from here...
  alreadySaved ? Icons.favorite : Icons.favorite_border,
  color: alreadySaved ? Colors.red : null,
),  

Result]

2. Add interactivity

- Add Code (main.dart)

 : class RandomWordsState -> _buildRow -> ListTile => icon action

onTap: () {      // Add 9 lines from here...
  setState(() {
    if (alreadySaved) {
      _saved.remove(pair);
    } else {
      _saved.add(pair);
    }
  });
},       // ... to here.

Result]

3. Navigate to a new screen

- Add Code (main.dart)

 : class RandomWordsState -> build -> appBar => action onPressed

actions: <Widget>[      // Add 3 lines from here...
new IconButton(icon: const Icon(Icons.list), onPressed: _pushSaved),
],

- Add Code (main.dart)

 : class RandomWordsState => list icon

void _pushSaved() {
}

- Add Code (main.dart)

 : class RandomWordsState -> _pushSaved => list icon push action

void _pushSaved() {
  Navigator.of(context).push(
  );
}

- Add Code (main.dart)

 : class RandomWordsState -> _pushSaved -> push => list icon push action content

new MaterialPageRoute<void>(   // Add 20 lines from here...
  builder: (BuildContext context) {
    final Iterable<ListTile> tiles = _saved.map(
          (WordPair pair) {
        return new ListTile(
          title: new Text(
            pair.asPascalCase,
            style: _biggerFont,
          ),
        );
      },
    );
    final List<Widget> divided = ListTile
        .divideTiles(
      context: context,
      tiles: tiles,
    )
        .toList();
  },

- Add Code (main.dart)

 : class RandomWordsState -> _pushSaved -> push => list icon push action content route

return new Scaffold(         // Add 6 lines from here...
  appBar: new AppBar(
    title: const Text('Saved Suggestions'),
  ),
  body: new ListView(children: divided),
);

Result]

4. Change the UI using Themes

- Add Code (main.dart)

 : class MyApp -> build => Change theme

theme: new ThemeData(          // Add the 3 lines from here...
  primaryColor: Colors.white,
),

Result]

5. Change icon properties and the UI using Themes color

- Change Code (main.dart)

 : class MyApp -> build => Change theme

theme: new ThemeData(          // Add the 3 lines from here...
  primaryColor: Colors.deepOrangeAccent,
),

- Change Code (main.dart)

 : class _buildSuggestions -> _buildRow -> trailing => Change icon and icon color

trailing: Icon(   // Add the lines from here...
  alreadySaved ? Icons.star : Icons.star_border,
  color: alreadySaved ? Colors.purple : null,
),

Result]

refer to Link :

https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2/#3