Post
Ask Question

First Flutter Project😁

Introduction

Hi folks! In this article, we will learn how to create the first project in Flutter's latest version. If you are new to Flutter, please check out my previous articles, as it will help you more. In this article, we will learn details about project structures, as well some introduction codes, and more. Let’s get started.

Create First Flutter Project 🥳

Note
I am using Android studio for the entire Flutter course but you can use VS CODE as well.

Step 1

Open your Android studio and select the New Flutter project (if you don't see New Flutter project Option, please follow my very first article to install Flutter SDK and to configure it correctly.).

Step 2

Select the Flutter option in the left-hand side menu. After that, select the flutter SDK path. Don't worry, it will automatically select, but you have to configure the Flutter the correct way. Then, click the next button at the bottom.

Step 3

This step is quite important, because this step contains your project information. In this step, you will enter your project name, project description and select the organization. Then, click the finish button.

Project Structure in detail

  • We can mainly use four folders in our project Android, iOS, Lib and tests folder. The Android folder contains Android supported files that we can use for an Android build, such as editing build Gradle files and changing Android minimum and target app versions.
  • The iOS folder has the same features as the above, but all are related to the iOS side build applications. We will learn more detail in future articles.
  • The lib folder is very important, because we write our code into the lib folder.
  • We can create code for Rest API and state management approaches, and more.
  • In the tests, the folder performs unit integration and widget testing. We learn this also in future articles.

Detail About Initial Counter code

This counter app code was initially generated by Flutter. Don't worry, it's just a counter application. Let’s deep dive into the counter code. (Note: Below I will explain some basic things, but some features I will introduce to you right time for example stateful and stateless widgets and so on.)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      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
  State<MyHomePage> createState() => _MyHomePageState();
}

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        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.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Import

First, we have the import statement. This imports the material.dart package, which helps in implementing the Material Design throughout the app and for most of the Dart files that are used for UI design you have to import this package.

Main

Then, there is the main function, which has the runApp method, containing the first Widget as its argument, in this case, it is called MyApp.

Theme

This property defines the ThemeData widget containing information about different colours, fonts and other theme data that would be used throughout the app. Here, only one property is defined, primarySwatch that stores the colour blue. But in your app, you can define any number of theme properties you want.

Home

This property contains a Stateful Widget, MyHomePage, to which the title is passed on. When you start this app for the first time, this is the widget that will be displayed as the first screen on your device.

_incrementCounter

This method calls the setState method, as I have discussed in my previous article. This setState is used to rebuild the widget tree. In this counter app, we have incremented the _counter variable within this setState. If we just increment the _countervariable without defining any setState method, then the variable would get updated behind the scenes. But, we would not see any UI changes as the widget tree would not be rebuilt.

build method

Now, we have the overridden build method. As I have discussed already in my previous article, this build method is responsible for the UI design of the app. In this app, the build method returns a Scaffold widget containing three properties: appBar, body and floatingActionButton.

appBar

This property takes the AppBar widget, containing a Text widget that displays the title of the app.

body

This property contains a Column widget, which is centered using the Center widget. The column widget contains two Text widgets, one displaying a text and the other displaying the number of counts. The second text widget contains a property, style which defines the text style for this text widget.

Conclusion

This article explained some basic features of the Flutter initialization project. We will learn more about this in more detail in future articles. Next, we will dive into projects and will learn about state management flutter and firebase and so on. Thank you.


Similar Articles