Show Menu
Cheatography
  1. Home >
  2. Programming >

Mobile Application 1/2 Cheat Sheet (DRAFT) by

Flutter App - Mobile Application

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Explan­ation: Standard hello world app 1/2

void main() => runApp­(My­App());
Main method which starts the class MyApp
class MyApp extends Statel­ess­Widget {...}
creates class MyApp, the extend Statel­ess­Widget makes the entire app into a widget
Widget build(­Bui­ldC­ontext context) {...}
builds the widgets in this method

Add external packages

The pubspe­c.yaml manages the assets and depend­encies of a flutter app
Example of pubspe­c.yaml:
 
depend­encies: 	flutter: 	      sdk: flutter 	    cupert­ino­_icons: ^0.1.2 	    englis­h_w­ords: ^3.1.5
Get packages:
At the top you should now be able to get the packages
After you get the packages there are free to be imported in whatever class you need

Create a List in flutter

Widget _buildSuggestions() {
  return ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: /1/ (context, i) {
        if (i.isOdd) return Divider(); /2/      
        ==> The Divider adds visual seperation between two tiles of the list

        final index = i ~/ 2; /3/
        if (index >= _suggestions.length) {
          _suggestions.addAll(generateWordPairs().take(10)); /4/
        }
        return _buildRow(_suggestions[index]);
      });
}
 

Mobile Applic­ation: Standard Hello World App 2/2

return MaterialApp(         returns an Material Design app
      title: 'Welcome to Flutter',
      home: Scaffold(         creates a Scaffold Widget
        appBar: AppBar(     creates an AppBar which contains a title
          title: Text('Welcome to Flutter'),
        ),
        body: Center(         creates a centered body with text in it
          child: Text('Hello World'),
        ),
      ),
    );

Add a stateful widget

class RandomWords extends StatefulWidget {
  @override                                                                                              
  RandomWordsState createState() => RandomWordsState();
}
===> This widget just creates it's state class

class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }
}
==> This class saves and creates new random words

Build ListTile in Flutter with Intera­ctivity

Widget _buildRow(WordPair pair) {
  final alreadySaved = _saved.contains(pair);
  return ListTile(
    title: Text(   ==> First Text is displayed in a tile
      pair.asPascalCase,
      style: _biggerFont,
    ),
    trailing: Icon( ==> Adds an Icon to the tile
      alreadySaved ? Icons.favorite : Icons.favorite_border,
      color: alreadySaved ? Colors.red : null,
    ),
    onTap: () {     ==> Adds Interactivity to the tile
      setState(() {
        if (alreadySaved) {
          _saved.remove(pair);
        } else { 
          _saved.add(pair); 
        } 
      });
    },             
  );
}