Flutter Basics: First App Programming (Part 2)

Create a widget

Everything in the Flutter app is widgets! Therefore, every element displayed on the screen in Flutter is a widget. There are two types of widgets provided by material.dart package, and you build your own custom widgets on top of them. They are Stateful and Stateless widgets.

Future articles in this series will take a closer look at State, Stateful Widgets, and Stateless Widgets.

When configuring the Flutter and Dart plugin, you can build your own custom widgets in the IDE or Editor. Just type in stateless or stateful and the IDE will make suggestions accordingly.

The example below creates a stateless widget named MyApp. You can choose any name for the widget.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

As shown in this example, we extend the StatelessWidget provided by the material package to create our own custom stateless widget. @override is a decorator that is also provided by the material package.

ウィジェットはabstract classであり、ビルドメソッドをオーバーライドする必要があります。このメソッドには、Flutterが提供するBuildContextのコンテキストが必要です。このメソッド内で、設立又は表示が必要なウィジェットを返します。

The widget is an abstract class and you need to override the build method. This method requires the context of the BuildContext provided by Flutter. Within this method, return the widget that needs to be established or displayed.

You need to define three parameters for MaterialApp: title, theme, and home. The title is simply to accept a string. Provide “First App Demo” as the value. Themes require a value of the ThemeData data type, which is a built-in type of the Flutter material package. therefore initialize it as in the following example

ThemeData(primarySwatch: Colors.amber,),

ThemeData accepts multiple values to set the app Default theme. primarySwatch is a required parameter that accepts a value of type MaterialColor. This is also a built-in type, and is what Flutter provides for Colors.amber to build app themes.

Next, you need to configure Home to accept widget types. The widget you provided here will appear on the screen. And initialize it with a container like this: “home:Container(),”. This will soon be replaced by a custom widget. The widget looks like this:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'First App Demo',
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: Container(),
    );
  }
}

Main function

To run the application, you need the main function. The main function is (){…} Use the general syntax, or

It can be described by defining it as an arrow function with ()=>. Let’s look at the code below for both syntaxes.

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

Or：

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

Both of the above run successfully. Still, if you need to return a single value, I think the arrow function is better. And F5 or Run | When you press Debug to run the application, a blank screen appears.

Create a Stateful widget

Flutter has two types of widgets: Stateless and Stateful. Among them, a Stateful widget is a widget that has a state. Now let’s learn how to create a StatefulWidget!

To create a Stateful widget, type stateful and press Tab to use the IDE or Editor’s autocomplete feature. For example, we have created the following Stateful widget named DummyWidget:

class DummyWidget extends StatefulWidget {
  @override
  _DummyWidgetState createState() => _DummyWidgetState();
}

class _DummyWidgetState extends State<DummyWidget> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Stateful widgets differ from stateless widgets. For example, a Stateful widget responds to internal data changes and reflects the changes itself in a re-render. Stateless widgets, on the other hand, do not re-render themselves. And we will talk more about this challenge in a future article.

Understanding Stateful widgets requires some kind of internal data. Here, we use a boolean value named isGreen to initialize it to false by default. I’m prefixing the variable with to make it a private variable in Dart and only accessible within this class.

Along with that, Widget build(BuildContext context){…} Instead of returning an empty container from method, it returns other results! The result is to return Scaffold, a widget provided in the material package. Note that every time you see a new/different screen, you need to provide Scaffold. And Scaffold accepts some parameters in the way of initialization.

Here, we provide an appBar and body to see the content on the screen. The DummyWidget should look like this:

class _DummyWidgetState extends State<DummyWidget> {
  bool _isGreen = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: _isGreen ? Colors.green : Colors.red,
      appBar: AppBar(
        title: Text('Your First App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
              onPressed: () {
                setState(() {
                  _isGreen = !_isGreen;
                });
              },
              child: Text(_isGreen ? 'TURN RED' : 'TURN GREEN'),
            ),
          ],
        ),
      ),
    );
  }
}

This Stateful DummyWidget has a private variable of type bool named _isGreen with a default of false. Instead of returning a container, it returns a Scaffold widget. And I provided two parameters: appBar and body.

AppBar accepts a value of type PreferredSizeWidget called AppBar(). AppBar() also accepts many other parameters to set. But here we use only one parameter to set the title displayed in the AppBar. What’s more, Title accepts widget types, so it uses the built-in Text() widget.

Body also accepts widget types. Therefore, we are using the built-in Column() widget. By default, the column extends from the top of the screen to the bottom, surrounding the child widget. The column contains multiple widgets as children.

Here we have only one child of the Column() widget called FlatButton(). And FlatButton() is also a widget provided by the material package. Flatbutton() has one onPressed parameter and one child parameter. onPressed accepts anonymous or pre-declared functions by their names. What you write inside this function determines what happens when the button is clicked.

Within this anonymous function, setState((){…}; is used. Changing the value internally, as in this case, changes the boolean _isGreen within the set state. Each button changes this value and goes through the process of re-rendering the Stateful widget.

Finally, the FlatButton(…) Provides a Text(‘…’) widget as a child element of . This specifies what is displayed within the button.

Also, in StatelessWidget MyApp, instead of returning an empty container, it returns a custom StatefulWidgetDummyWidget. Custom widgets can be displayed on the screen. Take a look at the main.dart file below.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'First App Demo',
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: DummyWidget(),
    );
  }
}

class DummyWidget extends StatefulWidget {
  @override
  _DummyWidgetState createState() => _DummyWidgetState();
}

class _DummyWidgetState extends State<DummyWidget> {
  bool _isGreen = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: _isGreen ? Colors.green : Colors.red,
      appBar: AppBar(
        title: Text('Your First App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
              onPressed: () {
                setState(() {
                  _isGreen = !_isGreen;
                });
              },
              child: Text(_isGreen ? 'TURN RED' : 'TURN GREEN'),
            ),
          ],
        ),
      ),
    );
  }
}

Flutter is a great framework, isn’t it? Through this article, you can create your first application using Flutter, right? We hope to provide you with useful information about Flutter. If you are considering offshore development, please contact us.