Flutter Widget Cheat Sheet

* Hello world!!!

lib/main.dart

import "package:flutter/material.dart";

void main() {
    runApp(new MyApp());
}

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home:
                Center(
                    child:
                    Text("Hello world!!!"),
                )
        );
    }
}

* Hello world!! split in two files

lib/main.dart

import "package:flutter/material.dart";
import "package:app_name/src/my_app.dart";

void main() {
    runApp(new MyApp());
}

lib/src/my_app.dart

import "package:flutter/material.dart";

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home:
                Center(
                    child:
                    Text("Hello world!!!"),
                )
        );
    }
}

* Hello world!! split in three files (Pages)

lib/main.dart

import "package:flutter/material.dart";
import "package:app_name/src/my_app.dart";

void main() {
    runApp(new MyApp());
}

lib/src/my_app.dart

import "package:flutter/material.dart";
import 'package:app_name/src/pages/home_page.dart';


class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home:
                Center(
                    child: HomePage(),
                )
        );
    }
}

lib/src/pages/home_page.dart

import "package:flutter/material.dart";

class HomePage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar:
                AppBar(
                    title: Text("Home page"),
                    centerTitle: false,
                ), // AppBar
            body:
                Center(
                    child:
                        Text("Hello world!!!"),
                ), // Center
            floatingActionButton:
                FloatingActionButton(
                    child:
                        Icon(Icons.add),
                        onPressed: null
                ), // FloatingActioButton
        ); // Scaffold
    } // Widget
} // StatelessWidget

* Basic three files scheme

lib/main.dart

import "package:flutter/material.dart";
import "package:app_name/src/my_app.dart";

void main() {
    runApp(new MyApp());
}

lib/src/my_app.dart

import "package:flutter/material.dart";
import 'package:app_name/src/pages/home_page.dart';


class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home:
                Center(
                    child: HomePage(),
                )
        );
    }
}

lib/src/pages/home_page.dart

For this file use:

Scaffold StatelessWinget

or

Scaffold StatefulWidget for not static Pages

* Scaffold Widget

main.dart

import "package:flutter/material.dart";

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text("Home page"),
        centerTitle: false,
      ), // AppBar
      body: Center(
        child: Text(
          "Text widget",
          style: TextStyle(fontSize: 12.0),
          textScaleFactor: 1.5,
        ),
      ), // Center
      bottomNavigationBar: BottomAppBar(
        shape: const CircularNotchedRectangle(),
        child: Container(height: 50.0),
      ),
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add), onPressed: null), // FloatingActioButton
    )); // Scaffold
  } // Widget
}

* Scaffold StatelessWinget

lib/src/pages/home_page.dart

import "package:flutter/material.dart";

class HomePage extends StatelessWidget {

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar:
                AppBar(
                    title: Text("Home page"),
                    centerTitle: false,
                ), // AppBar
            body:
                Center(
                    child:
                        Text("Hello world!!!"),
                ), // Center
            floatingActionButton:
                FloatingActionButton(
                    child:
                        Icon(Icons.add),
                        onPressed: null
                ), // FloatingActioButton
        ); // Scaffold
    } // Widget
} // StatelessWidget

* Scaffold StatefulWidget for not static Pages

lib/src/pages/home_page.dart

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
    @override
    createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
    int _foo = 10; // random variable

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar:
                AppBar(
                    title: Text("Home page"),
                    centerTitle: false,
                ), // AppBar
            body:
                Center(
                    child:
                        Text("Hello world!!!"),
                ), // Center
            floatingActionButton:
                FloatingActionButton(
                    child:
                        Icon(Icons.add),
                        onPressed: null
                ), // FloatingActioButton
        ); // Scaffold
    } // Widget
}

* Text widget

Basic Text widget:

Widget textWidget(String text) {
    return Expanded(
        child: Padding(
            padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
            child: Text(
              "$text",
              style: TextStyle(fontSize: 12.0, fontWeight: FontWeight.normal),
              textScaleFactor: 1.5,
              maxLines: 3,
              textAlign: TextAlign.justify,
              overflow: TextOverflow.ellipsis,
            )));
 }

8. FloatingActionButton with action method witget

floatingActionButton: FloatingActionButton.extended(
  icon: const Icon(Icons.thumb_up),
  label: const Text('FAB'),
  backgroundColor: Colors.green,
  onPressed: _actionName
)

void _actionName() {
    setState(() {
        print("Hello!!");
    });
}

FloatingActionButton with Text

Widget fabText(String text) {
    return FloatingActionButton.extended(
        icon: Icon(Icons.add),
        label: Text(text),
        backgroundColor: Colors.green,
        onPressed: () {
          print("Hello");
        });
  }

FloatingActionButton for accesibility

Widget fabAccesibility(String text) {
    return FloatingActionButton(
        child:
          Icon(
            Icons.add,
            color: Colors.white,
            size: 20.0,
            semanticLabel: '$text',
          ),
        onPressed: () {
          print("Hello");
        });
  }

9. Column widget

Two Text widget:

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    //crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[***widgets***]
) // Column

10. Row widget

Row with three widgets:

Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[***widgets***]
) // Row

11. Remove DEBUG Banner

debugShowCheckedModeBanner: false,

 @override
    Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false, // Remove DEBUG banner
            home:
                Center(
                    child: HomePage(),
                )
        );
    }

12. SizeBox widget

Space component

SizedBox(
    width: 3.0,
),

13. TextFormField widget

Create TextEditingController

class _HomePageState extends State<HomePage> {
    final foo = TextEditingController();

    @override
    void dispose() {
        foo.dispose(); // foo
        super.dispose();
    }

    @override
    Widget build(BuildContext context) {
        // code

TextField widget

TextField(
    controller: foo, // foo
    decoration: InputDecoration(
        border: OutlineInputBorder(),
        hintText: 'Enter a search term'
    ),
) //TextField

Get TextField value

void _nameMethod() {
    setState(() {
      print(foo.text); // foo
    });
  }

14. ListView widget

ListView(
    children: <Widget>[
        ListTile(title: Text("ListTitle uno"),),
        Divider(),
        ListTile(title: Text("ListTitle dos"),),
],
)

15. ListView dinamic widget

• Create a itemsList
  • final items = [...];
• Call a method for add items
  • ListView(children: _createItems()));
• Create method
  • List _createItems() {}

import 'package:flutter/material.dart';

class HomePageTemp extends StatelessWidget {
    final items = ["One", "Two", "Three", "Four"];

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: 
                AppBar(
                    title: Text("Componentes Temp"),
                ),
            body: 
                ListView(
                    children: _createItemsList()
                )
        );
    }

    List<Widget> _createItemsList() {
    List<Widget> itemsList = [];

    for (String item in items) {
        final tempWidget = ListTile(
            title: Text(item),
            subtitle: Text("Subtitle"),
            leading: Icon(Icons.ac_unit),
            trailing: Icon(Icons.arrow_right),
            onTap: () {
              print("$item");
            },
         );
    itemsList.add(tempWidget);
    itemsList.add(Divider());
    }
    return itemsList;
}

ListView option 2

List<Widget> _createItemsList2() {
    return items.map((item) {
      return Column(
        children: [
          ListTile(
           title: Text(item),
            subtitle: Text("Subtitle"),
            leading: Icon(Icons.ac_unit),
            trailing: Icon(Icons.arrow_right),
            onTap: () {
              print("$item");
            },
          ),
          Divider()
        ],
      );
    }).toList();
}

IconButton

IconButton(
    icon: const Icon(Icons.android),
    tooltip: 'Show Snackbar',
    color: Colors.white,
    onPressed: () {},
),

AppBar

appBar: AppBar(
    title: const Text('AppBar Demo'),
    actions: <Widget>[
      IconButton()
    ],

ScaffoldMessenger

ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('This is a snackbar')));

bottomNavigationBar

bottomNavigationBar: BottomNavigationBar(
    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.business),
        label: 'Business',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.school),
        label: 'School',
      ),
    ],
    currentIndex: _selectedIndex,
    selectedItemColor: Colors.amber[800],
    onTap: _onItemTapped,
  ),
    
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
    
 int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];