Gain insights into building a Todo app with Flutter, Firebase, AdMob, and InAppPurchases. Delve into UI design, CRUD functionality, and app monetization. Publish to Google Play Store.

Flutter- Build and publish your first mobile app-01.png

flutter_last_hope.tar.gz

run-provider

This course is designed to guide you through the process of building your first app using Flutter, a popular cross-platform framework for mobile application development. The course assumes that you are familiar with the object-oriented programming paradigm, which is a fundamental programming approach used in many modern programming languages, including Dart (the language used in Flutter).

In this course, you will learn how to build a Todo app, which will have CRUD functionality. You will also learn how to design the user interface of the app using Flutter widgets and handle user input and data storage using Firebase, a popular backend-as-a-service platform. Moreover, you understand how to monetize your app by integrating AdMob and InAppPurchases. 

By the end of the course, you will have a working Todo app that you can publish on the Google Play Store. You will also have a solid foundation in using Flutter, Firebase, AdMob, and InAppPurchases to build and monetize your mobile applications.

Build and Publish Your First Mobile App Using Flutter

## What does a responsive UI mean?
First, let’s understand what a responsive UI is. Having a responsive UI means having UI screens that are designed in such a manner that the screen looks similar on all types of devices, irrespective of screen size and resolution. Whether we open our app screens on a tablet, phone, or desktop, the screens should look somewhat similar on all of these devices.

We may think, 'Why should a developer take care of this?' We should take care of this because, when we are developing the app screens, we tend to build widgets (buttons, textboxes, etc.) according to the screen resolution of the emulator we're working on. If we choose the button's height as, say, `25`, this basically means there are `25` pixels on that particular device or emulator. This `25` value in magnitude will have to be adjusted to different devices with different resolutions.

So, in short, making pixel-perfect screens is responsive UI.

## Flutter's `screenutil` package

To install this package, run the following command on a terminal inside our project folder:

```
flutter pub add flutter_screenutil
```
After installing the package, we may need to run the following command if we're having trouble finding the package while importing:

```
flutter pub get
```
To use this package in our code, we have to do some configuration. First, we have to wrap our `MaterialApp` widget with the `ScreenUtilInit` widget coming from this package. Let's find out how below:

 

# What does a responsive UI mean?
First, let’s understand what a responsive UI is. Having a responsive UI means having UI screens that are designed in such a manner that the screen looks similar on all types of devices, irrespective of screen size and resolution. Whether we open our app screens on a tablet, phone, or desktop, the screens should look somewhat similar on all of these devices.

We may think, 'Why should a developer take care of this?' We should take care of this because, when we are developing the app screens, we tend to build widgets (buttons, textboxes, etc.) according to the screen resolution of the emulator we're working on. If we choose the button's height as, say, `25`, this basically means there are `25` pixels on that particular device or emulator. This `25` value in magnitude will have to be adjusted to different devices with different resolutions.

So, in short, making pixel-perfect screens is responsive UI.

# Flutter's `screenutil` package

To install this package, run the following command on a terminal inside our project folder:

```
flutter pub add flutter_screenutil
```
After installing the package, we may need to run the following command if we're having trouble finding the package while importing:

```
flutter pub get
```
To use this package in our code, we have to do some configuration. First, we have to wrap our `MaterialApp` widget with the `ScreenUtilInit` widget coming from this package. Let's find out how below:

 

Learn about responsive UI while designing app screens.

Introduction to Course

Flutter Basics

Common Widgets

Firebase Setup

State Management

AdMob and InAppPurchase

Todo App Models

Todo UI Screens

Essential Tools to Enhance Your Flutter Workflow

Publishing to the Play Store

Appendix

Responsive UI

What does a responsive UI mean?