Flutter – How to insert an AppBar and a button

By | 13/12/2019

In this post, we will start to use Flutter, in order to understand how it works.
We will try to create a simple mobile application, where we will insert an “app bar”, a button and a text in the centre of the display.

First of all, we open Android Studio, select the option “Start a new Flutter project” and then we push on the “Flutter application“ button.
Then, we have to fill down some information in order to configure the application:

If we run the application, using for example the iOS emulator, this will be the result:

Now, we open the file lib/main.dart, delete everything and we write this code:

import 'package:flutter/material.dart';

final String title = "First App with Flutter";


// Define the first widget, called Material app.
// It is a convenience widget that wraps a number
// of widgets that are commonly required for material
// design applications
void main() => runApp(MaterialApp(
  // Define in home page, the widget called Scaffold.
  // The Scaffold implements the basic material design visual layout structure.
  home: Scaffold(
    // in the Scaffold, we define an Appbar
    appBar: AppBar(
      title: Text(title),
    ),
    body: Center(
     child: Text("Text in the center" , style: TextStyle(color: Colors.yellow, fontWeight: FontWeight.bold)),
    ),
    floatingActionButton: FloatingActionButton(
        onPressed: () {
          //To do:
        },
      child: Text("+"),
    ),
    backgroundColor: Colors.blue,
  ),
));



If we run the application, this will be the result:



Leave a Reply

Your email address will not be published. Required fields are marked *