Flutter Course

7.2 Creating the Basic Structure of an App Page

Flutter, as a modern UI framework, provides a variety of tools and libraries necessary for developing great apps. In this tutorial, we will explain in detail how to create the basic structure of an app page with Flutter. The course will proceed through the following steps:

Installing and Setting Up Flutter
Creating a New Project
Designing the Basic Page Structure
Understanding the Basics of State Management
Adding Simple UI Components

1. Installing and Setting Up Flutter

Before installing Flutter, you need to set up your development environment. Here are the basic steps to install Flutter:

Download the Flutter SDK: Flutter Install Guide
Unzip the Flutter SDK to your desired directory and add that path to the system PATH.
Install an IDE: Install Visual Studio Code or Android Studio.
Install Flutter and Dart plugins.
Set up the Android or iOS development environment according to the project’s specifications.

2. Creating a New Project

If the Flutter SDK is installed, the next step is to create a new Flutter project. Run the following command in the terminal:

flutter create my_app

This command creates a new project named ‘my_app’. Move into the project directory:

cd my_app

Now let’s open the project. Please find and open the lib/main.dart file in your IDE. You will see the code that has been generated by default, which is our basic app structure.

3. Designing the Basic Page Structure

Now we will design the basic structure of the app page. Our goal is to set up a basic layout with a simple UI. To do this, we will use the StatelessWidget class to construct the basic page.

import 'package:flutter/material.dart';

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

    class MyApp extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
            return MaterialApp(
                title: 'Flutter Basic Structure',
                theme: ThemeData(
                    primarySwatch: Colors.blue,
                ),
                home: HomePage(),
            );
        }
    }

    class HomePage extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
            return Scaffold(
                appBar: AppBar(
                    title: Text('Home'),
                ),
                body: Center(
                    child: Text(
                        'Welcome!',
                        style: TextStyle(fontSize: 24),
                    ),
                ),
            );
        }
    }

The above code creates a simple Flutter app. The main components are as follows:

MaterialApp: The root widget of the app, responsible for the basic app configuration.
Scaffold: A widget that provides properties to define the basic structure of the app (app bar, body, floating action button, etc.).
Text: A widget that displays strings on the screen.

4. Understanding the Basics of State Management

The state management of an app refers to the process of managing data that can change due to user interactions or network requests. Flutter offers various approaches to state management. The most basic method is using StatefulWidget.

class HomePage extends StatefulWidget {
        @override
        _HomePageState createState() => _HomePageState();
    }

    class _HomePageState extends State {
        int _counter = 0;

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

        @override
        Widget build(BuildContext context) {
            return Scaffold(
                appBar: AppBar(
                    title: Text('Home'),
                ),
                body: Center(
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                            Text(
                                'Number of times the button was pressed:',
                            ),
                            Text(
                                '$_counter',
                                style: Theme.of(context).textTheme.headline4,
                            ),
                        ],
                    ),
                ),
                floatingActionButton: FloatingActionButton(
                    onPressed: _incrementCounter,
                    tooltip: 'Increment',
                    child: Icon(Icons.add),
                ),
            );
        }
    }

The above code is a basic example of state management that increments the counter when the button is pressed. Here, the setState method is used to update the state.

5. Adding Simple UI Components

Now let’s enrich the app by adding a few UI components. For example, we can add buttons, images, lists, etc. Below is an example code that includes additional UI components:

class HomePage extends StatefulWidget {
        @override
        _HomePageState createState() => _HomePageState();
    }

    class _HomePageState extends State {
        @override
        Widget build(BuildContext context) {
            return Scaffold(
                appBar: AppBar(
                    title: Text('Home'),
                ),
                body: Center(
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                            Image.network(
                              'https://example.com/image.png',
                              height: 100,
                              width: 100,
                            ),
                            SizedBox(height: 20),
                            ElevatedButton(
                                onPressed: () {
                                    // Code to be executed on button click
                                },
                                child: Text('Click the Button'),
                            ),
                        ],
                    ),
                ),
            );
        }
    }

In this code, we used the Image.network widget to fetch an image and added a button using ElevatedButton. The design and layout of each UI element are managed through Flutter’s Column layout widget.

Conclusion

In this tutorial, we learned how to create the basic structure of an app page with Flutter. Flutter provides powerful UI tools, allowing you to develop a variety of apps quickly. Continue to learn more complex layouts and state management to enhance your Flutter development skills. The next tutorial will cover navigation and routing.