Building Your First Flutter App: Step-by-Step Tutorial

Are you excited about building your first mobile app using the Flutter framework? If so, you've come to the right place! In this tutorial, we will guide you step-by-step through the process of building your first Flutter app.

Flutter is a mobile application development framework that allows you to build beautiful, high-performance apps for both iOS and Android. Flutter uses Dart, a programming language developed by Google, to write the app code. With Flutter, you can create visually stunning apps with a smooth and fast user experience.

In this tutorial, we will assume that you have already set up your development environment to work with Flutter and Dart. If you haven't done this yet, don't worry! We have a comprehensive guide on our website that will walk you through the process.

Step 1: Create a New Flutter Project

The first step in building your first Flutter app is to create a new project. To do this, open your favorite IDE (such as IntelliJ IDEA or Android Studio) and follow these steps:

1. Click on "File" > "New Flutter Project"
2. Choose "Flutter Application"
3. Select a project location on your hard drive and give your project a name

After you've created your new project, you should see a basic Flutter app with a Counter widget that increments a number when you press a button.

Step 2: Add a Theme

By default, Flutter uses the Material Design theme for its widgets. However, you can customize the look and feel of your app by creating your own theme.

To add a custom theme, open the "lib/main.dart" file and add the following code inside the main function:

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final ThemeData myTheme = ThemeData(
      primarySwatch: Colors.blue,
      visualDensity: VisualDensity.adaptivePlatformDensity,
    );
    
    return MaterialApp(
      title: 'My App',
      theme: myTheme,
      home: MyHomePage(title: 'My App Home Page'),
    );
  }
}

This code creates a new theme with a blue primary color and applies it to the MaterialApp widget in the build method. You can customize the theme to match your app's brand colors and design.

Step 3: Add a New Screen

In most apps, users navigate through different screens to accomplish tasks. In Flutter, each screen is represented by a widget. To add a new screen to your app, follow these steps:

1. Create a new file in the "lib" directory called "second_screen.dart"
2. Inside "second_screen.dart", add the following code:

import 'package:flutter/material.dart';

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

This code creates a new StatelessWidget called SecondScreen. The screen has an app bar with a title and a body with a centered text widget.

3. Now, let's add a button on the first screen that will navigate to the second screen when pressed. Open "lib/main.dart" and modify the build method of the MyHomePage widget as follows:

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

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

  void _navigateToSecondScreen() {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SecondScreen()),
    );
  }

  @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,
            ),
            RaisedButton(
              child: Text("Go to second screen"),
              onPressed: _navigateToSecondScreen,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

This code adds a new RaisedButton widget to the Column widget that will navigate to the second screen when pressed. We define a new method _navigateToSecondScreen that uses the Navigator.push method to navigate to the SecondScreen.

Step 4: Add User Input

Most apps require some form of user input, whether it's filling out a form or pressing a button to perform an action. In Flutter, you can add user input widgets like text fields and buttons to your app.

To add a text field, modify the MyHomePage widget in "lib/main.dart" as follows:

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

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

  void _navigateToSecondScreen() {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SecondScreen()),
    );
  }

  void _onTextChanged(String text) {
    setState(() {
      _text = text;
    });
  }

  @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,
            ),
            RaisedButton(
              child: Text("Go to second screen"),
              onPressed: _navigateToSecondScreen,
            ),
            TextField(
              onChanged: _onTextChanged,
              decoration: InputDecoration(
                labelText: "Enter some text",
              ),
            ),
            Text("You typed: $_text"),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

This code adds a TextField widget to the Column widget that triggers a callback function _onTextChanged when the user types into the field. The text is saved into the _text variable, which is then displayed in a Text widget below the text field.

Step 5: Build and Run Your App

Congratulations! You've completed the tutorial and built your first Flutter app. To see the app in action, follow these steps:

1. Make sure your device or emulator is connected to your development machine
2. Open a terminal window and navigate to your project directory
3. Run flutter build apk to build an APK file
4. Run flutter install to install the app on your device or emulator
5. Open the app on your device or emulator and explore its features

Conclusion

In this tutorial, we've walked through the steps to build your first Flutter app. We've covered how to create a new project, add a custom theme, create a new screen, add user input, and build and run your app.

Flutter is a fantastic framework for building high-performance mobile apps, and we hope this tutorial has given you a good introduction to its capabilities. Keep learning and exploring, and have fun building great apps!

Editor Recommended Sites