Skip to content

Instantly share code, notes, and snippets.

@daniel-vera-g
Created May 16, 2019 18:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save daniel-vera-g/d22523cec7d7a37c1dd86f8f59a44561 to your computer and use it in GitHub Desktop.
Save daniel-vera-g/d22523cec7d7a37c1dd86f8f59a44561 to your computer and use it in GitHub Desktop.
Heavily documented flutter starter app boilerplate.
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