Building Your First Flutter App: A Step-by-Step Guide

Gif Credits to Giphy

Introduction:

Welcome to the exciting world of Flutter app development!
In this beginner-friendly blog post, we will walk you through the process of building a basic Flutter app with a simple user interface (UI) and navigation.

By the end of this lesson, you’ll have a solid understanding of creating Flutter projects, building UI components, and implementing navigation between screens. Let’s dive in!

Creating a New Flutter Project:

To get started, follow these steps to create a new Flutter project:

Using Flutter CLI:
Open your terminal or command prompt and navigate to the desired directory where you want to create the project.
Run the command flutter create my_app to create a new Flutter project named my_app.

Using IDE:
If you prefer using an Integrated Development Environment (IDE) like Visual Studio Code (VS Code) or Android Studio, you can create a new Flutter project through the IDE’s interface.
Use Ctrl/Cmd + Shift + P select “New Flutter Project” or “Create New Flutter Project” and provide a name for your project as my_app.

Understanding the Basic Structure:

Once you’ve created your Flutter project, it’s essential to familiarize yourself with its basic structure. Here are the key directories and files you’ll find:

lib Directory:
This directory contains the main Dart code for your app. The entry point for your app is the main.dart file, where you define the app’s behavior and UI.

assets Directory:
If you have any static assets like images, fonts, or JSON files, place them in the assets directory. You can reference these assets in your code later.

pubspec.yaml File:
This file is where you declare your app’s dependencies, including any external packages you want to use. You can also specify asset paths and configure other project settings here.

Building a Simple Flutter App with UI Components:

Let’s start building the user interface of our app using basic Flutter UI components:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: Center(
          child: Text('Welcome to etwinworkshop!'),
        ),
      ),
    );
  }
}

In the above code, we define a MyApp class that extends the StatelessWidget class. The build method returns a MaterialApp widget, which acts as the root widget of our app.

Within MaterialApp, we define a Scaffold widget as the home screen of our app.
The Scaffold contains an AppBar widget for the app bar and a Center widget with a Text widget for the app’s body.

Implementing Navigation Between Screens:

Now, let’s implement navigation between screens using Flutter’s built-in navigation system:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/second': (context) => SecondScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text('This is the second screen!'),
      ),
    );
  }
}

In the above code, we define two additional classes: HomeScreen and SecondScreen. The initialRoute property of MaterialApp is set to “/”, which represents the home screen.

The routes property maps named routes to corresponding screen widgets. In HomeScreen, we use the Navigator.pushNamed method to navigate to the second route when the button is pressed.

Conclusion:

Congratulations on building your first Flutter app with a simple UI and navigation!

In this beginner-friendly blog post, we covered creating a new Flutter project, understanding the project structure, building UI components, and implementing navigation between screens.

This is just the beginning of your Flutter journey, and there’s so much more to explore. Keep experimenting, learning, and building amazing Flutter apps.

Happy coding!