The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Creating Your First Flutter App

Next ►
►

In this section, we will guide you through the process of creating your first Flutter app. By the end of this lesson, you will have a basic understanding of how to set up a new Flutter project, run it on an emulator or physical device, and understand the structure of a Flutter application.

Step 1: Setting Up Your Flutter Project

  1. Open your terminal or command prompt.
  2. Navigate to the directory where you want to create your project. 
    cd path/to/your/projects
  3. Create a new Flutter project using the flutter create command. 
    flutter create my_first_app
  4. Navigate into your new project directory. 
    cd my_first_app

Step 2: Understanding the Project Structure

When you create a new Flutter project, it generates a number of files and directories. Here’s a brief overview of the most important ones:

  • lib/: This directory contains the main code for your application. The main.dart file is the entry point of your app.
  • pubspec.yaml: This file manages the dependencies and metadata for your project.
  • android/: Contains the Android-specific code and configurations.
  • ios/: Contains the iOS-specific code and configurations.
  • test/: Contains the test files for your application.

Step 3: Running Your App

  1. Open your project in your preferred IDE (e.g., Visual Studio Code, Android Studio).
  2. Ensure you have an emulator running or a physical device connected.
  3. Run the app using the following command in the terminal: 
    flutter run

Alternatively, you can use the run/debug options provided by your IDE.

Step 4: Exploring the Default Flutter App

When you run the app, you will see a default Flutter application with a counter that increments every time you press the floating action button. Let’s take a look at the main.dart file to understand how this works.

main.dart File

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState 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>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Explanation

  • main() function: The entry point of the application. It calls runApp() with an instance of MyApp.
  • MyApp class: A stateless widget that sets up the MaterialApp and its theme.
  • MyHomePage class: A stateful widget that represents the home page of the app.
  • _MyHomePageState class: Manages the state of MyHomePage, including the counter and the method to increment it.

Step 5: Modifying the App

Let’s make a simple modification to the app. We will change the text displayed in the center of the screen.

  1. Open lib/main.dart.
  2. Find the Text widget inside the Column widget.
  3. Change the text from 'You have pushed the button this many times:' to 'Button pressed:'.
Text(
  'Button pressed:',
),
  1. Save the file and observe the changes in your running app.

Practical Exercise

Task

  1. Create a new Flutter project named hello_flutter.
  2. Modify the main.dart file to display a text "Hello, Flutter!" in the center of the screen.

Solution

  1. Create the project:

    flutter create hello_flutter
cd hello_flutter

  2. Modify lib/main.dart:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Flutter App'),
        ),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}
  1. Run the app: 
    flutter run

Conclusion

Congratulations! You have successfully created and modified your first Flutter app. You now have a basic understanding of the Flutter project structure and how to run and modify a Flutter application. In the next module, we will dive into Dart programming basics, which is essential for building Flutter applications.

◄ Previous
◄
Next ►
►

Flutter Development Course

Module 1: Introduction to Flutter

Module 2: Dart Programming Basics

Module 3: Flutter Widgets

Module 4: State Management

Module 5: Navigation and Routing

Module 6: Networking and APIs

Module 7: Persistence and Storage

Module 8: Advanced Flutter Concepts

Module 9: Testing and Debugging

Module 10: Deployment and Maintenance

Module 11: Flutter for Web and Desktop

The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved