Show Menu
Cheatography

Flutter Cheat Sheet (DRAFT) by [deleted]

flutterflutterflutterflutter

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

Simple Hello World App

import 'package:flutter/material.dart';  import the material component package

void main() => runApp(MyApp()); create and run the app

class MyApp extends StatelessWidget { the main widget which is launched
  @override
  Widget build(BuildContext context) { overriden build method which holds the content
    return MaterialApp(
      title: 'Welcome to Flutter', title
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'), set the appbar-text
        ),
        body: Center(
          child: Text('Hello World'), set the body to center and add text
        ),
      ),
    );
  }
}

Infinite scrolling listview

 class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[]; adds a suggestion list
  final _biggerFont = const TextStyle(fontSize: 18.0); increases the font size
  @override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Startup Name Generator'),
    ),
    body: _buildSuggestions(), sets the body to the build suggestions method which generates the list
  );
}
}

Widget _buildSuggestions() {
  return ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: (context, i) { creates the items
        if (i.isOdd) return Divider(); adds a divider between items

        final index = i ~/ 2; calculates number of word parings in the list without counting dividers
        if (index >= _suggestions.length) {
          _suggestions.addAll(generateWordPairs().take(10)); add ten more words when the end of the list is reached
        }
        return _buildRow(_suggestions[index]); build the row using the widget below

Widget _buildRow(WordPair pair) {
  return ListTile(
    title: Text(
      pair.asPascalCase, **sets the word as text
      style: _biggerFont, changes the fontsize
    ),
  );
}
      });
}
 

External packages

edit pubspec.yaml, to add english_words

   dependencies:
    flutter:
      sdk: flutter
    cupertino_icons: ^0.1.2
+   english_words: ^3.1.5 

after that, run flutter pub get to get the new dependencies
and then add the new dependency to lib/main.dart

import 'package:english_words/english_words.dart';

Generate random words

   class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
+     final wordPair = WordPair.random(); create a new wordpair
      return MaterialApp(
        title: 'Welcome to Flutter',
        home: Scaffold(
@@ -16,7 +18,7 @@
            title: Text('Welcome to Flutter'),
          ),
          body: Center(
-           child: Text('Hello World'), remove the hello world text
+           child: Text(wordPair.asPascalCase), show random word as text
          ),
        ),
      );
 

Stateful widgets

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

this creates a "state" which saves the generated word and displays it as text

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => RandomWordsState();
}

add the state to the statefull widget

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
-     final wordPair = WordPair.random();
      return MaterialApp(
        title: 'Welcome to Flutter',
        home: Scaffold(
@@ -18,8 +17,8 @@
            title: Text('Welcome to Flutter'),
          ),
          body: Center(
-           child: Text(wordPair.asPascalCase),
+           child: RandomWords(),
          ),
        ),
      );
    } 

remove the previous random word generation and replace it with the stateful widget