Flutter Development-2 Project Creation and Structure Overview

If you’ve set up your Flutter development environment from our previous post, it’s time to create an actual project and explore the basic structure of a Flutter app. If you haven’t familiarized yourself with the Dart language basics yet, I recommend checking out our Dart introduction post first: Dart Language Introduction – Basic Syntax and Data Types.

1. Creating a Flutter Project

There are two ways to create a Flutter project:

Using the Command Line

1. Open a terminal or command prompt.
2. Navigate to the directory where you want to create your project.
3. Run the following command:

flutter create my_first_app

Using Android Studio

1. Launch Android Studio.
2. Go to ‘File’ > ‘New’ > ‘New Flutter Project’.
3. Select ‘Flutter Application’ and click ‘Next’.
4. Specify the project name and save location.
5. Verify that the Flutter SDK path is correct.
6. Click ‘Finish’ to create the project.

2. Exploring the Project Structure

When you create a Flutter project, it generates the following basic structure:

my_first_app/
├── android/
├── ios/
├── lib/
│   └── main.dart
├── test/
├── pubspec.yaml
└── README.md

• android/: Files related to the Android app
• ios/: Files related to the iOS app
• lib/: Where your Dart code resides. main.dart is the entry point of the app
• test/: Test files
• pubspec.yaml: Project configuration and dependency definition file

3. Examining the main.dart File

The lib/main.dart file is the entry point of your Flutter app. Let’s look at the default generated code:

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),
      ),
    );
  }
}

This code implements a simple counter app. It displays a number that increases each time you press a button.

4. Running the App

Now that we’ve created the project and examined its basic structure, let’s run the app:

1. Start an emulator in Android Studio or connect a physical device.
2. Open the main.dart file and click the ‘Run’ button or press Shift + F10.
3. Watch as the app builds and launches.

Conclusion

In this post, we’ve created a Flutter project and explored its basic structure. In the next post, we’ll start implementing the UI for a simple To-Do list app based on this foundation.

If you have any questions about Flutter development, feel free to leave a comment below!

Related Resources

Dart official website: Dart programming language | Dart

Flutter official website: Flutter – Build apps for any screen