Created
May 16, 2019 18:15
-
-
Save daniel-vera-g/d22523cec7d7a37c1dd86f8f59a44561 to your computer and use it in GitHub Desktop.
Heavily documented flutter starter app boilerplate.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
import 'package:english_words/english_words.dart'; | |
// Arrow functions for one line functions | |
void main() => runApp(MyApp()); | |
// Makes App itself widget -> Nearly everything is widget(alignment, padding & layout) | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
title: 'Startup Name Generator', | |
// Change theme by using ThemeData class | |
theme: ThemeData( | |
primaryColor: Colors.blueGrey, | |
), | |
// Widget Tree for Home screen(Can be quite complex) | |
home: RandomWords(), | |
); | |
} | |
} | |
/** | |
* Stateless Widgets -> Immutable | |
* Stateful widgets -> Mantain state through lifetime | |
* Implementtaion stateful widget = stateful widget class + instance of class | |
*/ | |
// Stateful widget RandomWords, which created State class <RandomWordState>(Generic State class) | |
class RandomWordsState extends State<RandomWords> { | |
/* Prefixing identifier with _ enhances privacy */ | |
// Suggestions list to save suggested word pairings | |
final _suggestions = <WordPair>[]; | |
// Variable to make font bigger | |
final _biggerFont = const TextStyle(fontSize: 18.0); | |
// Store word favourite word pairings(Set prefered over List, because no duplicates are allowed) | |
final Set<WordPair> _saved = Set<WordPair>(); | |
// Build method to generate words pairs(Removing from MyApp class) | |
@override | |
Widget build(BuildContext context) { | |
// Implement the basic material design visual layout | |
return Scaffold( | |
appBar: AppBar( | |
title: Text('Startup Name Generator'), | |
/* | |
Add new page(route) | |
Navigate between home route & new route | |
Navigator manages a stack containing the app's routes | |
Use Push/Pop To change dislays | |
*/ | |
actions: <Widget>[ | |
// When clicked, a new route with the saved favorites is pushed to the navigator | |
IconButton(icon: Icon(Icons.list), onPressed: _pushSaved), | |
], | |
), | |
body: _buildSuggestions(), | |
); | |
} | |
// Build ListView to display word pairings | |
Widget _buildSuggestions() { | |
return ListView.builder( | |
// callback once per suggested word pairing & place suggestion in ListTile row | |
itemBuilder: (context, i) { | |
// Add pixel divider | |
if (i.isOdd) return Divider(); | |
final index = i ~/ 2; | |
if (index >= _suggestions.length) { | |
_suggestions.addAll(generateWordPairs().take(10)); | |
} | |
// Display each new pair in ListTile | |
return _buildRow(_suggestions[index]); | |
}, | |
); | |
} | |
// Display each new pair in ListTile | |
Widget _buildRow(WordPair pair) { | |
// Variable to ensure that a word pairing has not already been added to favorites | |
final bool alreadySaved = _saved.contains(pair); | |
return ListTile( | |
title: Text( | |
pair.asPascalCase, | |
style: _biggerFont, | |
), | |
// Heart shaped Icon | |
trailing: Icon( | |
alreadySaved ? Icons.favorite : Icons.favorite_border, | |
color: alreadySaved ? Colors.red : null, | |
), | |
// Event listener to change the state of the icon & change the state | |
onTap: () { | |
setState(() { | |
if (alreadySaved) { | |
_saved.remove(pair); | |
} else { | |
_saved.add(pair); | |
} | |
}); | |
}, | |
); | |
} | |
/* | |
Build a route and push it to the Navigator's stack. | |
Change the screen to display a new route | |
*/ | |
void _pushSaved() { | |
// Push the route to the navigators stack | |
Navigator.of(context).push( | |
MaterialPageRoute<void>( | |
builder: (BuildContext context) { | |
// Generate the ListTile rows | |
final Iterable<ListTile> tiles = _saved.map( | |
(WordPair pair) { | |
return ListTile( | |
title: Text( | |
pair.asPascalCase, | |
style: _biggerFont, | |
), | |
); | |
}, | |
); | |
// divideTiles: Add Horizontal spacing between each ListTile | |
// divided: Holds final rows | |
// toList: Convert to a list | |
final List<Widget> divided = ListTile.divideTiles( | |
context: context, | |
tiles: tiles, | |
).toList(); | |
// Return a Scafforl with: | |
// AppBar for new Rout | |
// Body of new route -> ListView with ListTiles rows(each row separated by divider) | |
return Scaffold( | |
appBar: AppBar( | |
title: Text('Saved Suggestions'), | |
), | |
body: ListView(children: divided), | |
); | |
}, | |
), | |
); | |
} | |
} | |
// Stateful RandomWords widget to create State class | |
class RandomWords extends StatefulWidget { | |
@override | |
RandomWordsState createState() => RandomWordsState(); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment