mohumohu studio

1. Creating a Project
   • Creating from the Command Line
   • Creating with Visual Studio Code
2. Source Code of main.dart
3. How the App Runs
4. About StatelessWidget Class
5. About MaterialApp Class
6. Understanding the App Structure
7. About Material Design
8. About Scaffold
   • appBar and AppBar Class
   • About body
9. Summary

Creating a Project

Creating from the Command Line

First, let’s look at how to create a project using the command line.

Enter the following command in the command line:

     flutter create project_name

Replace project_name with the desired name of your project.

This will create the Flutter project files, which can be opened in a code editor to continue development.

Creating with Visual Studio Code

Next, let’s see how to create a project using Visual Studio Code.

Open Visual Studio Code and click on Command Palette from the menu.

Type and select Flutter: New Project.

Choose Application.

Select a folder where you want to create the project and click Select a folder to create the project in.

Enter the project name and press Enter.

Now, the project files have been created!!

Source Code of main.dart

Next, let’s open the project files.

The lib folder contains the main application code. By default, main.dart is included in this folder.

This file contains the necessary code for the application.

The default main.dart file contains a simple counter app, but to make it even simpler, let’s modify the source code as follows:

     import 'package:flutter/material.dart';

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

     class MyApp extends StatelessWidget {
       const MyApp({super.key});

       @override
       Widget build(BuildContext context) {
         return MaterialApp(
           title: 'Flutter Demo',
           home: Text(
             'Hello, Flutter World!!',
             style: TextStyle(fontSize: 32.0),
           ),
         );
       }
     }

Run this program in Chrome.

Click No Device in the bottom right corner of Visual Studio Code and select Chrome.

Click the Run or Bug icon in the top right corner.

After a short wait, Chrome will launch and display the application.

How the App Runs

The main.dart file imports package:flutter/material.dart, which contains Flutter’s Material Design UI widgets.

     import 'package:flutter/material.dart';

The simplest way to execute an app in Flutter is:

     void main() {
       runApp(widget);
     }

The main function is the entry point of the application. It calls runApp, which initializes and runs the Flutter app.

About StatelessWidget Class

The argument passed to runApp is an instance of the MyApp class, which extends StatelessWidget.

A StatelessWidget is a base class for widgets that do not hold any state.

Here’s how the class is structured:

     class ClassName extends StatelessWidget {
       const ClassName({super.key});

       @override
       Widget build(BuildContext context) {
         return MaterialApp(…);
       }
     }

The StatelessWidget class provides a build method, which is called when the widget is created.

In this case, the method returns an instance of the MaterialApp class.

This class is responsible for managing Material Design in the application.

Since StatelessWidget is only a class without state, it does not handle design-related elements. However, by returning a MaterialApp instance from a StatelessWidget, the app is displayed using Material Design.

When creating a MaterialApp instance, various widgets to be displayed on the screen are passed as arguments.

All widgets in Flutter are implemented as subclasses of the Widget class.

When a widget is returned within MaterialApp, it is displayed on the screen as a widget of the StatelessWidget class (such as the MyApp class).

In the build method, an instance of the BuildContext class is passed as an argument.

BuildContext provides various functionalities related to the widget it is associated with.

For example, it contains functionalities related to the widget’s hierarchy, such as information about its parent or child widgets.

About MaterialApp Class

MaterialApp is the core class that manages the Material Design UI.

     return MaterialApp(
      title: 'Flutter Demo',
      home: Text(
        'Hello, Flutter World!!',
        style: TextStyle(fontSize: 32.0),
      ),
    );

If you look closely, you will notice that there is only a single statement written.

An instance of MaterialApp is created and returned, with the statement formatted across multiple lines for better readability, as shown below.

     return MaterialApp( title: ⚪︎⚪︎,  home: ⚪︎⚪︎ );

Here, two named parameters, title and home, are provided.

The title parameter represents the title of the application.

The home parameter is used to display the widget embedded in this application.

The widget specified here will be displayed as the content of the MaterialApp.

Here, an instance of the Text class is set as an argument. This is a widget used to display text.

The first argument specifies the text to be displayed, and the second argument is the style property.

This property is used to configure the text style.

Understanding the App Structure

The core structure of a Flutter app consists of:

1. Defining the main function, where runApp initializes the app.
2. Passing an instance of a StatelessWidget or StatefulWidget to runApp.
3. The StatelessWidget class contains a build method returning a MaterialApp instance.
4. MaterialApp’s home property defines the widget to be displayed.

In a Flutter app, the main function, StatelessWidget class, and MaterialApp class are implemented in a hierarchical structure.

Additionally, remember the Text class, which is used to display text, along with the TextStyle class, which is used to configure its style.

About Material Design

Since the default script includes the Material Design package, it can be said that Flutter apps and Material Design are closely related.

Material Design is a visual design language proposed by Google.

It is designed to create a unified visual experience across all devices, ensuring a consistent user experience.

On smartphones, design languages vary by platform, and the design of basic components such as buttons and alerts differs slightly between platforms.

In Flutter, standard widgets are all grouped within the widget.dart package, which is loaded and used by default.

In addition to this, there are separate packages for platform-specific designs: material.dart for Android’s Material Design and cupertino.dart for iOS’s Cupertino Design.

Since Material Design is set to be loaded by default, the UI will be built based on Material Design unless Cupertino Design is explicitly imported.

Google sees Material Design not just as something for Android but as a design language that transcends platform differences.

For example, Material Design is widely adopted in the web world as well.

Because of this, Google strongly promotes Material Design as the foundational design language for Flutter app development.

Since there are already iPhone apps using Material Design, it’s best not to rigidly associate Android apps with Material Design and iPhone apps with Cupertino Design.

Instead, it’s more accurate to think of Material Design as a common design language across both platforms, while Cupertino Design provides widgets for those who want to maintain iOS’s unique visual style.

About Scaffold

Currently, our app only displays plain text. Most apps have an App Bar at the top and content below it. To achieve this, we use Scaffold:

     import 'package:flutter/material.dart';

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

     class MyApp extends StatelessWidget {
       const MyApp({super.key});

  
       @override
       Widget build(BuildContext context) {
         return MaterialApp(
             title: 'Flutter Demo',
             home: Scaffold(
               appBar: AppBar(
                 title: Text('Hello Flutter!!'),
               ),
               body: Text(
                 'Hello Flutter World!!',
                 style: TextStyle(fontSize: 32.0),
               ),
             ));
       }
     }

When run in Chrome, the following display appears.

Here, an instance of the Scaffold class is assigned to the home property of MaterialApp.

The term “Scaffold” refers to the framework used in construction, meaning it serves as the foundation for building an app.

This Scaffold class includes essential layout structures based on Material Design.

By adding the necessary widgets to it, you can create the appearance of a typical application.

To summarize, an instance of Scaffold is created as follows:

     Scaffold(　appBar: 〇〇,　body: 〇〇　)

In Scaffold, several named arguments are available to hold elements that display widgets.

Here, we will introduce the two most fundamental named arguments: appBar and body.

appBar and AppBar Class

The appBar property defines the top application bar:

     appBar: AppBar(
            title: Text('Hello Flutter!!'),
          ),

The appBar property is set with an instance of the AppBar class.

AppBar is a widget class for the application bar. It provides a title property.

By specifying the text to be displayed as an instance of the Text class, it will be shown as the title of the application bar.

About body

The body property is responsible for the blank space below the application bar.

Here, a Text instance is created and embedded within it.

     body: Text(
            'Hello Flutter World!!',
            style: TextStyle(fontSize: 32.0),
          ),

The actual app display will be built by embedding content into the body.

While Text is specified here, in real development, widgets that act as containers for multiple widgets will be embedded and used.

Summary

This time, we covered the basic structure of a Flutter project!

At the beginning, I mentioned that we would build an app, but in reality, it ended up being just a simple text display…

Next time, we’ll dive into StatefulWidget while creating an app that outputs stored data randomly when a button is pressed.

Until then, enjoy your Flutter journey! 🚀