Flutter For Dummies
Book image
Explore Book Buy On Amazon
Flutter's online documentation is a great source of information, but sometimes you'd rather glance quickly at an example. This cheat sheet has some sample code. Just grab it and go!

Flutter UI ©Eny Setiyowati/Shutterstock.com

A "Hello World" Dart Program

main() => print('Hello World');

A "Hello World" Flutter Program

import 'package:flutter/material.dart';

main() => runApp(HelloApp());

class HelloApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Material(
        child: Text("Hello world!"),
      ),
    );
  }
}

A Simple Scaffold

Scaffold(
  appBar: AppBar(
    title: Text("I'm aan AppBar."),
  ),
  body: Center(
    child: Text("I'm a Text widget."),
  ),
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.ac_unit),
  ),
  drawer: Drawer(
    child: Center(child: Text("I'm a drawer.")),
  ),
)

A Cupertino App

import 'package:flutter/cupertino.dart';

void main() => runApp(CupterinoApp());

class CupterinoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          backgroundColor: Color.fromRGBO(66, 165, 245, 1.0),
          middle: Text("I'm a navigation bar"),
        ),
        child: Center(
          child: Text('Hello from Cupertino, Californa!'),
        ),
      ),
    );
  }
}

A Column

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text("I'm on top."),
    Text("I'm in the middle."),
    Text("I'm the bottom."),
  ],
)

Responding to a Button Press

import 'package:flutter/material.dart';

void main() => runApp(ButtonDemo());

class ButtonDemo extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  String _whatToDisplay;
  void initState() {
    _whatToDisplay = 'Click Me';
  }

  void _doSomething() {
    setState(() {
      _whatToDisplay = 'Thank you for clicking';
    });
  }

  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          child: Text(_whatToDisplay),
          onPressed: _doSomething,
        ),
      ),
    );
  }
}

Some Useful Layout Widgets

Material(
  child: SafeArea(
    child: Column(
      children: [
        Expanded(
          child: Container(
            height: 50.0,
            color: Colors.blue,
          ),
        ),
        SizedBox(
          height: 50.0,
        ),
        Container(
          alignment: Alignment.bottomRight,
          height: 100.0,
          color: Colors.blue,
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Text(
              'Hello',
              style: TextStyle(backgroundColor: Colors.red),
            ),
          ),
        ),
      ],
    ),
  ),
)

A Text Field

class _MyHomePageState extends State {
  final _myController = TextEditingController();

  @override
  void dispose() {
    _myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              decoration: InputDecoration(labelText: "Type something:"),
              controller: _myController,
            ),
            RaisedButton(
              child: Text("UPPERCASE"),
              onPressed: () =>
                  _myController.text = _myController.text.toUpperCase(),
            ),
          ],
        ),
      ),
    );
  }
}

A Slider

class _MyHomePageState extends State {
  double _sliderValue = 1.0;

  void _refreshSlider(double newValue) {
    setState(() {
      _sliderValue = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(_sliderValue.toStringAsFixed(2)),
            Slider(
              value: _sliderValue,
              onChanged: _refreshSlider,
              min: 1.0,
              max: 10.0,
            )
          ],
        ),
      ),
    );
  }
}

Radio Buttons

class _MyHomePageState extends State {
  int _radioValue;

  void _refreshRadio(int newValue) {
    setState(() {
      _radioValue = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(_radioValue?.toString() ?? 'Select One'),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('0'),
                Radio(
                    value: 0,
                    groupValue: _radioValue,
                    onChanged: _refreshRadio),
                Text('1'),
                Radio(
                    value: 1,
                    groupValue: _radioValue,
                    onChanged: _refreshRadio),
                Text('2'),
                Radio(
                  value: 2,
                  groupValue: _radioValue,
                  onChanged: _refreshRadio,
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Basic Navigation

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: RaisedButton(
          child: Text('Go to second page'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondPage(),
              ),
            );
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

A List

List movieName = [
  "Casablanca",
  "Citizen Kane",
  "Lawrence of Arabia",
];

ListView.builder(
  itemCount: movieName.length,
  itemBuilder: (context, index) {
    return ListTile(
        title: Text(movieName[index]),
        onTap: () => _goToDetailPage(movieName[index]));
  },
)

Animation

class MyHomePageState extends State
    with SingleTickerProviderStateMixin {
  Animation animation;
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(duration: const Duration(seconds: 3), vsync: this);
    animation = Tween(begin: 100.0, end: 500.0).animate(controller)
      ..addListener(() {
        setState(() {});
      });
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Stack(
        children: [
          Positioned(
            left: 150.0,
            top: animation.value,
            child: Icon(
              Icons.music_note,
              size: 70.0,
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

About This Article

This article is from the book:

About the book author:

Barry Burd, PhD, is a computer science professor at Drew University. The author of Java Programming for Android Developers For Dummies, Beginning Programming with Java For Dummies, and Android Application Development All-in-One For Dummies, Barry also writes for Server Side (theserverside.com), Android Authority (androidauthority.com), InfoQ.com and numerous other online publications.

This article can be found in the category: