Basic Flutter App Setup

Lets get started with our first demo Flutter application, and go through the project to see how the application starts and behaves.

Project Setup

A basic flutter project starts off with 4 folders.

  • android
    This contains a FlutterActivity, AndroidManifest and other files you would expect in a regular Android project.
  • ios
    This contains a FlutterAppDelegate, info.plist and other files and folders you would expect in a regular iOS project.
  • lib
    This is where your Flutter app lives. In here you will have *.dart files.
  • test
    We all do tests right? This is where we write our widget tests.

In the root folder, you will also find files such as:

  • pubspec.yaml
    This is a configuration file, for your Flutter application. For those not experienced with YAML, this works by tab indentation, instead of open and closing brackets.

If you go to Run > Edit Configurations in Android Studio, you will see the Dart entrypoint. By default, this points to main.dart in your lib folder, and here is where your Flutter app starts.

Flutter Application

The default Flutter application is all contained in main.dart.

Entrypoint

In order for this file to be the starting point, there must be a void main(). This is where your app enters, and builds a new Flutter app.

void main() => runApp(new MyApp());

MyApp

MyApp is a StatelessWidget. Each widget has a build override, that passes a BuildContext through.

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

MaterialApp is an existing Widget in the Flutter framework, that contains, as the name suggests, a material looking shell for the app. It has a few arguments you can pass through, such as title and theme, and home, the first page of your app.

MyHomePage

The homepage is a StatefulWidget, and will hold state of your page.

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

In here, you need to override the createState() method and assign it your state class.

MyHomePageState

This class, is where you will code most of your logic and UI. It all starts with a class that extends State<MyHomePage>.

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

Any fields, such as _counter, are considered state. Next, you have a build method to override.

Note: This will run, every time your state changes. Your UI Widget Tree is immutable, and is rebuilt for any change made.

@override
Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar(
      title: new Text(widget.title),
    ),
    body: new Center(
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Text(
            'You have pushed the button this many times:',
          ),
          new Text(
            '$_counter',
            style: Theme.of(context).textTheme.display1,
          ),
        ],
      ),
    ),
    floatingActionButton: new FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: new Icon(Icons.add),
    ),
  );
}

In this code you will also notice, the onPressed: property, calls a method _incrementCounter.

void _incrementCounter() {
  setState(() {
    _counter++;
  });
}

Any method where you have changed the state, calls the setState method. In doing so, it rebuilds the UI, with the new state values. All of this put together is how a simple Flutter application works.

Mobile Developer, Microsoft & Xamarin MVP

Share on
© 2018 Adam Pedley