My Simple Flutter App: Part 1

I’ve tried getting into mobile development for a few years. Only to start reading through docs and tutorials, then dropping it altogether. Along came Flutter! It looked promising and easy to pick up! But alas, I did not complete my journey. But for my nth attempt, it will be different! I will blog about my progress and the app I want to build, in hopes of getting further than I’ve ever before!

tldr; I’m building a Flutter app and will blog about it.

Getting Started

The first time I did this, expecting to code right away. It took a while (maybe hours, I can’t remember) to download it all and set it up. Setting up dev environments can be infuriating.

Follow steps 1–3 (install, setup an environment, and test drive)of the Getting Started tutorial and you’ll be good to go.

I need to upgrade my version of flutter, so I’m going to do that using the flutter upgrade command.

Hello World

The goal is to print “Hello World” to the screen. Throughout this series, we will modify that simple app as we go, learning how to do more advance techniques.

I’ll be using Android Studio for development.

To create a new app:

1. Open Android Studio
2. Click Start a new Flutter Project > Flutter Application
3. Click Next, then fill out all the things (Project name, Flutter SDK Path, Project Location, Description)

Removing the boilerplate code

You’ll end up with a lot of boilerplate code in widget_test.drt and main.drt. Delete it. Then replace it with the code snippets below.

Now, your widget_test.drt and main.dart files should look like this:

widget_test.drt

import 'package:flutter_test/flutter_test.dart';

import 'package:my_simple_flutter_app/taco.dart';

void main() {
  testWidgets('Display Hello World', (WidgetTester tester) async {
    // Build our app and trigger a frame.
    await tester.pumpWidget(MyApp());

    // Look for "Hello World" text
    expect(find.text('Hello World'), findsOneWidget);
  });
}

main.drt

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Text(''
      ),
    );
  }
}

Note: The main() function in `main.drt` is the entry point of the application. Learn more about main() here.

TDD (Test Driven Development)

My goal is to use TDD as much as possible throughout the lifecycle of this app. So, to start, we need a failing a test. If you updated your `widget_test.drt` file, to look like the code above, then you should have a failing test.

To run the test, click the play buttons in the margin.

To pass the test, we will need to render `Hello World` to the screen. Flutter uses widgets to display everything, including Text! In our code, we’re using the MaterialApp widget as our base widget. To pass our test, we’re going to pass MaterialAppthe Text widget as part of the home parameter. Then, set the construct for Text to Hello World

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Text('Hello World'),
    );
  }
}

Note: home is the route that’s displayed first, when the application is started.

Rerun the test. It should be passing! You’ve made your first app with Flutter🎉!

Running main.drt will display Hello World on the emulated phone screen. It’s going to look a little sad. We’ll fix this in the next post.

For Fun

Since a widget is expected to be returned from main(). I wanted to see what would happen if I only returned the Text widget.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Text('Hello World');
  }
}

After running my test, I get the following error:

The following assertion was thrown building Text("Hello World"):
No Directionality widget found.
RichText widgets require a Directionality widget ancestor.

It goes on to explain why a Directionality widget, such as the `MaterialApp` widget, is required (one of the best error messages I’ve seen).