How to build your first Flutter app

Discover how to build your first Flutter app with ease through our step-by-step tutorial. Watch our quick video to see the final product after following our guide. Start your Flutter journey now and become a pro mobile developer.

Flutter is one of the best frameworks for building cross-platform mobile apps, offering a flexible and powerful development environment that allows you to create high-quality, visually stunning apps for both iOS and Android devices. With its unique architecture, Flutter enables fast and efficient app development, making it ideal for both experienced and new developers.

When you build your first Flutter app, you get to learn the Dart programming language or Flutter framework by applying the concepts and techniques you learn in a practical and hands-on manner, helping you to better understand and internalize the material. This experience-driven approach to learning allows you to develop real-world skills and abilities that you can immediately apply in your career or personal projects.

Step by step guide on how to build your first Flutter app!

Learn how to build your first Flutter app, a simple one-page app that allows users to scroll through a list of photos and expand them in full-screen mode. This step-by-step guide will walk you through the process of creating a Flutter app from scratch, including how to install Flutter, add image assets, create a model class, and more.

1. Install Flutter

The first step is to install Flutter on your computer. Follow the instructions on the official Flutter website to install it on your operating system.

2. Create a new project

Open the terminal and navigate to the desired location for your project. Type the following command to create a new Flutter project:

flutter create my_first_app

3. Add image assets

To add image assets to your project, create a new folder in the assets directory and place your images in it. If you don’t have an assets directory in your project folder, you can simply create one.

cd my_first_app
mkdir assets

If you don’t have images to test with, you can simply download two stock photos from here. One you download your images, you can simply copy them to the assets directory.

cp ~/Downloads/photo1.jpg assets/
cp ~/Downloads/photo2.jpg assets/

Then, open your favorite editor (I’m using Visual Studio, you can learn how to set it up here) and open your my_first_app directory. Here, you can open the pubspec.yaml file and add the following line to to include the image assets in your project:

assets:
    - assets/photo1.jpg
    - assets/photo2.jpg

If you are having problems with this step, you can check the Flutter official documentation which provides a more in depth explanation on how to work with assets in your Flutter app.

4. Create a model class

To represent each photo in your list, create a new class named Photo that contains the properties for the photo’s file name and title. For simplicity, you can place this model class right above class MyApp in your main.dart.

class Photo {
  final String imageUrl;
  final String title;

  const Photo({required this.imageUrl, required this.title});
}

5. Create a list of photos

In your main.dart file, create a list of Photo objects to represent the photos in your list. You should create this list in your main.dart file under the _MyHomePageState class.

class _MyHomePageState extends State<MyHomePage> {

  final List<Photo> photos = [
    const Photo(imageUrl: "photo1.jpg", title: "Photo 1"),
    const Photo(imageUrl: "photo2.jpg", title: "Photo 2"),
  ];

6. Create a widget for the photo list

Create a new widget named PhotoList that displays a list of photos. You can use the ListView widget to display the list and the Card widget to display each photo. You can place this one right under the Photo class.

class PhotoList extends StatelessWidget {
  final List<Photo> photos;

  PhotoList({required this.photos});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: photos.length,
      itemBuilder: (context, index) {
        return Card(
          child: Image.asset(
            "assets/${photos[index].imageUrl}",
            fit: BoxFit.cover,
          ),
        );
      },
    );
  }
}

7. Cleanup boilerplate code and add Photo List to main app

You should now cleanup all the boilerplate code generated when creating your first app and your stateful widget should look like this:

class _MyHomePageState extends State<MyHomePage> {
  final List<Photo> photos = [
    const Photo(imageUrl: "image1.jpg", title: "Image 1"),
    const Photo(imageUrl: "image2.jpg", title: "Image 2"),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: PhotoList(photos: photos));
  }
}

Let’s give it a try to see how it looks so far. Simply open your iOS simulator and run flutter run and you should see the following:

Now, let’s see how we can expand each photo on tap!

8. Create a full-screen photo widget

To display the full-screen photo, create a new widget named FullScreenPhoto that takes a Photo object as an argument and displays the photo in full screen.

class FullScreenPhoto extends StatelessWidget {
  final Photo photo;

  FullScreenPhoto({required this.photo});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: Image.asset(
          "assets/${photo.imageUrl}",
          fit: BoxFit.cover,
        ),
        onTap: () => Navigator.pop(context),
      ),
    );
  }
}

9. Navigating to the full screen photo

To display the photo in full-screen mode, you will use the Expanded widget. This widget takes up all the available space within its parent and allows you to create a full-screen experience. In this case, the Expanded widget will be added to the GestureDetector widget and will contain the Image widget displaying the photo.

          GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  fullscreenDialog: true,
                  builder: (context) => FullScreenPhoto(
                    photo: photos[index],
                  ),
                ),
              );
            },
            child: Card(
              child: Image.asset(
                "assets/${photos[index].imageUrl}",
                fit: BoxFit.cover,
              ),
            ));

You just finished to build your first Flutter App!

Congratulations! You have just built your first Flutter app and taken a big step towards becoming a cross-platform mobile developer. The app you have created is simple yet powerful, showcasing the capabilities of Flutter and its ability to create beautiful and responsive user interfaces. We hope that this tutorial has provided you with a solid foundation to continue building more amazing apps in Flutter. Keep practicing, learning, and growing your skills, and who knows what amazing apps you will build next! You an keep up with our latest tutorials on our blog! Congratulations again on building your first Flutter app!

If you’re looking for a quick and easy way to jumpstart your next Flutter app, consider downloading a Flutter template from a trusted source such as our website. These templates provide you with a ready-made foundation for your app, saving you time and effort in the initial stages of development. With a wide variety of templates to choose from, you’re sure to find one that matches your needs and helps you get up and running quickly. Whether you’re building a simple utility app or a complex business app, using a Flutter template can give you a head start on your project and help you achieve your goals faster. Downloading a Flutter template is a great way to kickstart your next app and take your mobile development skills to the next level!