Setting up Flutter on your machine

The detailed steps to install Flutter on your personal computer & getting started with Flutter is available at the following blog post

Coding the application

Create the initial Cupertino app

• Create a simple templated Flutter app, using the instructions in the above blog. Name the project cupertino_store. You’ll be modifying this starter app to create the finished app.
• Replace the contents of main.dart with the following code.

• Add a file to the lib directory called styles.dart. The Styles class defines the text and color styling to customize the app.

• Add the following CupertinoStoreApp class to lib/app.dart.

• Add the following CupertinoStoreHomePage class to lib/app.dart to create the layout for the homepage.

• At the top of the project, edit the pubspec.yaml file. Add the libraries that you will need, and a list of the image assets.

Create the structure for a 3-tab app

• The final app features 3 tabs:
  Product list | Product search | Shopping cart
• Replace the CupertinoStoreHomePage class with the following, which sets up a 3-tab scaffold:

• Create a lib/product_list_tab.dart file for the first tab that compiles cleanly, but only displays a white screen. Use the following content:

• Create a lib/search_tab.dart file that compiles cleanly, but only displays a white screen. Use the following content:

• Create a lib/shopping_cart_tab.dart file that compiles cleanly, but only displays a white screen. Use the following content:

• Update the import statements in lib/app.dart to pull in the new tab widgets:

Add state management

• Create a model directory under lib. Add a lib/model/product.dart file that defines the product data coming from the data source:

• Create a lib/model/products_repository.dart file. This file contains all products for sale. Each product belongs to a category.

• Here is the list of method signatures provided by this class.

• In the main()method, initialize the model. Add the lines marked with NEW.

List products for sale

• Create the lib/product_row_item.dart file, with the following content:

• In lib/product_list_tab.dart, import the product_row_item.dart file.

import 'package:flutter/cupertino.dart';
import 'package:provider/provider.dart';

import 'model/app_state_model.dart';
import 'product_row_item.dart';      // NEW

• In the build() method for ProductRowTab, get the product list and the number of products. Add the new lines indicated below:

• Also in the build() method, add a new sliver to the sliver widgets list to hold the product list. Add the new lines indicated below:

Add product search

• Update the imports in lib/search_tab.dart. Add imports for the classes that the search tab will use:

• Update the build() method in _SearchTabState. Initialize the model and replace the CustomScrollView with individual components for searching and listing.

• Add supporting variables, functions, and methods to the _SearchTabState class. These include initState(), dispose(), _onTextChanged(), and _buildSearchBox(), as shown below:

• Create a new file, lib/search_bar.dart. The SearchBar class handles the actual search in the product list. Seed the file with the following content:

Add customer info

• Update the lib/shopping_cart_tab.dart file. Add private methods for building the name, email, and location fields. Then add a _buildSliverChildBuildDelegate() method that build out parts of the user interface.

• Update the build() method in the _SearchTabState class. Add a SliverSafeArea that calls the _buildSliverChildBuildingDelegate method:

Add date picker

• Add imports and a const to lib/shopping_cart_tab.dart. Add the new lines, as shown:

• Add a _buildDateAndTimePicker() function to the _ShoppingCartTab widget. Add the function, as follows:

• Add a call to build the date and time UI, to the _buildSliverChildBuilderDelegate function. Add the new code, as shown:

Add selected items for purchase

• Import the product package in shopping_cart_tab.dart.

import 'model/product.dart';

• Add a currency format to the _ShoppingCartTabState class.

final _currencyFormat = NumberFormat.currency(symbol: '\$');

• Add a product index to the _buildSliverChildBuilderDelegate function.

SliverChildBuilderDelegate _buildSliverChildBuilderDelegate(
AppStateModel model) {
return SliverChildBuilderDelegate(
(context, index) {
final productIndex = index - 4;    // NEW
switch (index) {]
// ...

• In the same function, display the items to purchase. Add the code to the default: section of the switch statement, as follows:

Building & running the application

• Connect your Emulator or physical Android device to test the application.
• Click on Build & Run.
• And Boooom 🔥, your app is ready.
  The final build would look like the below illustration.

Flutter Full App | Enappd

Enappd Store | Premium App Starters