How to create a Mobile App 📱 for Beginners using Flutter:2024 | Sinhala Tutorial | From start to end

Introduction

This tutorial will guide you through the process of creating a mobile app using Flutter, perfect for beginners. By following these steps, you will learn how to design an app from start to finish, utilizing tools like Figma for design and Flutter for development. This guide is based on a comprehensive video tutorial conducted in Sinhala, making it accessible for those who prefer that language.

Step 1: Gather Design Assets and Plan Your App

• Download the necessary assets from the provided Google Drive link: Download Assets.
• Access the Figma file for design inspiration here: Figma File.
• Review the app's layout and features to plan the structure and functionality.

Step 2: Create a Flutter Project

• Open your terminal or command prompt.
• Run the following command to create a new Flutter project:

  flutter create my_app
  

• Navigate to the project directory:

  cd my_app
  

Step 3: Set Up Your Development Environment

• Install Visual Studio Code (VS Code) if you haven't already.
• Add the Flutter and Dart extensions to VS Code for enhanced functionality.
• Open your newly created Flutter project in VS Code.

Step 4: Run the App on a Virtual Device

• Set up an Android Emulator via Android Studio or use a physical device.
• In VS Code, open the terminal and run:

  flutter run
  

• Ensure that the emulator or device is connected properly.

Step 5: Import Necessary Packages

• Open the pubspec.yaml file in your project.
• Add any required packages under the dependencies section:

  dependencies:
    flutter:
      sdk: flutter
    # Add other packages here
  

• Save the file and run the command:

  flutter pub get
  

Step 6: Understand Stateless and Stateful Widgets

• Decide whether your app components will be stateless or stateful.
• Stateless widgets are immutable, while stateful widgets maintain state that can change during the lifecycle of the widget.

Step 7: Build the Basic App Structure

• Implement a Material app in your main.dart file:

  import 'package:flutter/material.dart';
  
  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(),
      );
    }
  }
  

Step 8: Create the AppBar

• Add an AppBar widget to your Scaffold:

  Scaffold(
    appBar: AppBar(
      title: Text('My App Title'),
    ),
  )
  

Step 9: Design the App Body

• Use the Column widget to structure your app body:

  body: Column(
    children: [
      // Add widgets here
    ],
  )
  

Step 10: Add UI Elements

• Create a heading for your app:

  Text('Welcome to My App', style: TextStyle(fontSize: 24)),
  

• Add a hero image using the Image widget:

  Image.asset('assets/hero_image.png'),
  

Step 11: Utilize Axis Alignment

• Use MainAxisAlignment and CrossAxisAlignment to align your widgets within the Column or Row:

  Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.start,
  )
  

Step 12: Add Additional UI Components

• Implement SizedBox for spacing:

  SizedBox(height: 20),
  

• Add a description with a SingleChildScrollView for long text:

  SingleChildScrollView(
    child: Text('Your description here'),
  )
  

Step 13: Create Interactive Elements

• Add a button to navigate to another screen:

  ElevatedButton(
    onPressed: () {
      // Navigation logic here
    },
    child: Text('Next Screen'),
  )
  

Step 14: Build Additional Screens

• Create a second and third screen using new Stateless or Stateful classes.
• Implement navigation between screens using the Navigator class.

Step 15: Finalize Your App Layout

• Design and add an app footer for additional information or navigation options.

Conclusion

By following these steps, you have successfully created a mobile app using Flutter. This tutorial covered everything from setting up your development environment to building a complete app layout with navigation. For further learning, check out the source code provided in the video description and explore more of the Flutter For Beginners playlist. Happy coding!