Flutter app development, E Commerce App first step

In our previous section we have an introduction to Flutter app development. We’ll build an e commerce app, step by step.

In the beginning we used a simple theme. As a result, we have our first screenshot like the following.

We can take a look at the first branch where we have the initial code.

Certainly we declared the theme in our Material App widget.

Therefore the code was as follows.

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

import 'providers/products.dart';
import 'screens/product_detail_screen.dart';
import 'screens/products_overview_screen.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (_) => Products(),
        ),
      ],
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyShop',
      theme: ThemeData(
        fontFamily: 'Lato',
        colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.purple)
            .copyWith(secondary: Colors.deepOrange),
      ),
      home: const ProductsOverviewScreen(),
      routes: {
        ProductDetailScreen.routeName: (ctx) => const ProductDetailScreen(),
      },
    );
  }
}

We had used the Multi provider so that we could pass our model class products as Provider data type.

Besides, we also used a secondary color deep orange as our color scheme.

As an outcome we had the above screenshot.

However, from the very beginning, we have decided to use Material You or Material 3 with Flutter 3.

Flutter 3 app and Material You

Firstly, it has many advantages, such as we can change the theme from dark to light or vice versa.

Secondly, it will give us a tremendous performance booster. 

For example, we can build this e-commerce app in three formats at the same time.

Besides the mobile app, we can build the web and desktop app. Performance wise there should be no difference.

We can run the app for the web using the Chrome browser as the following screenshot.

By the way, we have used the dark theme.

To make it happen, firstly, we have used a few flutter packages.

After that we have added the dependency to the “pubspec.yaml” file.

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  provider: ^6.0.3
  material_color_utilities: ^0.1.4  
  dynamic_color: ^1.1.2
  google_fonts: ^2.3.1

The next big thing, we have declared the Change Notifier Provider in a different way. 

We’ve used the create and builder at the same time.

Let’s take a look at the code first, and then we will discuss why we have done that.

import 'package:dynamic_color/dynamic_color.dart';
import 'package:e_commerce_app/models/theme.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'providers/products.dart';
import 'screens/product_detail_screen.dart';
import 'screens/products_overview_screen.dart';

final settings = ValueNotifier(
  ThemeSettings(
    sourceColor: Colors.yellow.shade900,
    themeMode: ThemeMode.system,
  ),
);

/// creating a new branch
///
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Products(),
      builder: (context, _) => DynamicColorBuilder(
        builder: (lightDynamic, darkDynamic) => ThemeProvider(
          lightDynamic: lightDynamic,
          darkDynamic: darkDynamic,
          settings: settings,
          child: const MyApp(),
        ),
      ),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final theme = ThemeProvider.of(context);
    return MaterialApp(
      title: 'MyShop',
      theme: theme.dark(settings.value.sourceColor),
      home: const ProductsOverviewScreen(),
      routes: {
        ProductDetailScreen.routeName: (ctx) => const ProductDetailScreen(),
      },
    );
  }
}

We have used two properties for one reason.

Flutter app development and ChangeNotifierProvider

Firstly, when we want to instantiate our notifier, we always use the “create” property of Change Notifier Provider.

As a result the “create” property expects a model class which extends the Change Notifier and notifies the listener.

Secondly, we have used the builder property to show a specific Widget like Dynamic Color Builder. On the other hand this specific Widget passes theme data to the child widget.

The next important thing is we have used the theme across the whole app. 

Finally, we have used the Provider for two purposes.

The first is, of course, to pass the theme across the app.

And the second is to show the products that we have created in the local file.

In the next section we’ll discuss that part in detail.

If you want to clone this step, please visit the respective GitHub repository.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Python and Data Science

Flutter, Dart and Algorithm

Twitter