Building a Flutter Demo App with Material Design

In this tech blog, we'll walk you through building a Flutter demo app that showcases the use of Material Design and basic interactivity. The app consists of a home page with a counter that increments when a button is pressed. Let's dive into the code and explore how it works.

Prerequisites

Before getting started, ensure that you have Flutter installed on your system. If not, follow the official Flutter installation guide: Flutter Installation

Creating a New Flutter Project

To begin, create a new Flutter project using the flutter create command or an IDE like Android Studio or Visual Studio Code. Once the project is created, navigate to the main.dart file and replace its contents with the following code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.deepPurple),
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

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

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

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

Code Explanation

Let's go through the code to understand how it works.

Importing Dependencies

We start by importing the necessary dependencies from the flutter/material.dart package, which provides widgets and utilities for building Flutter apps with Material Design.

import 'package:flutter/material.dart';

Defining the Entry Point

In the main() function, we call the runApp() method and pass an instance of the MyApp widget is the root widget for our app.

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

Creating the MyApp Widget

The MyApp widget is a stateless widget that serves as the root of our application. It returns a MaterialApp widget, which configures the overall theme and initial route of our app.

class MyApp extends StatelessWidget {
  const MyApp({Key? key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.deepPurple),
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Creating the MyHomePage Widget

The MyHomePage widget represents the home page of our app. It is a stateful widget that manages the mutable state of the counter.

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

  final String title;

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

Managing State with _MyHomePageState

The _MyHomePageState the class holds the mutable state for the MyHomePage widget. In this case, it includes a _counter variable that keeps track of the button press count.

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

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

  @override
  Widget build(BuildContext context) {
    // ...
  }
}

Building the UI with Scaffold and Widgets

In the build() method of _MyHomePageState, we return a Scaffold widget. The Scaffold provides the basic structure for our app