Flutter Grocery Shopping App – In this article I will explain how to develop Grocery shopping applications using flutter dart language. Flutter is the perfect language for implementing online shopping cart applications. Because the UI was very attractive, end users are likely to use those types of designs.
Already I told nowadays most developers migrate java to flutter. Because it’s a hybrid app domain, we can get both android & iOS applications. In the beginning flutter is a little bit hard to understand. But after working a few days, we easily adopted the dart program.
We have collection of projects in various programming language. So once you have to check and if useful then able to download the source code in free of cost.
Flutter Grocery
In this century the maximum of people buy their groceries online like Grofers, Zepto, BigBasket, Amazon etc. So coming developers are also interested in developing those sites. We need strong programming knowledge for developing flutter applications. Suppose if you don’t have programming knowledge, use WordPress WooCommerce it’s very easy to implement shopping websites.
When we develop the Admin Dashboard option, that’s very attractive & easy to customize our site. But here I did not give this feature.
Create Project
Okay let’s start our project on dart. If you are a beginner on flutter, watch my YouTube Flutter Tutorial Step by Step tutorial scratch video. After watching this you got an idea about how working & handling flutter widgets, API etc. I assume already you know the basic steps project creation.
The best recommended IDE was Visual Studio Code, because it’s very lightweight. Suppose if you are using a high configuration system then we suggest Android Studio IDE which has a lot of benefits. For example here give main.dart code file,
import 'package:flutter/material.dart';
import 'package:flutter_grocery_shopping/SizeConfig.dart';
import 'package:flutter_grocery_shopping/dairy.dart';
import 'package:flutter_grocery_shopping/fruits.dart';
import 'package:flutter_grocery_shopping/nuts.dart';
import 'package:flutter_grocery_shopping/vegetables.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
return OrientationBuilder(
builder: (context, orientation) {
SizeConfig().init(constraints, orientation);
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'HomeScreen App',
home: MyMainPage(),
);
},
);
},
);
}
}
class MyMainPage extends StatefulWidget {
MyMainPage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyMainPageState createState() => _MyMainPageState();
}
class _MyMainPageState extends State<MyMainPage> with SingleTickerProviderStateMixin{
TabController tabController;
@override
void initState() {
// TODO: implement initState
super.initState();
tabController = TabController(length: 4, vsync: this);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20.0, top: 50.0),
child: Row(
children: <Widget>[
Icon(Icons.menu, color: Colors.black, size: 6 * SizeConfig.imageSizeMultiplier,),
Spacer(),
Icon(Icons.shopping_cart, color: Colors.black, size: 6 * SizeConfig.imageSizeMultiplier,)
],
),
),
SizedBox(height: 5 * SizeConfig.heightMultiplier,),
Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20.0),
child: Container(
width: MediaQuery.of(context).size.width,
height: 50.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30.0),
border: Border.all(color: Colors.grey, width: 0.5),
),
child: Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20.0),
child: Row(
children: <Widget>[
Text("Search here", style: TextStyle(
color: Colors.grey,
fontSize: 2.4 * SizeConfig.textMultiplier,
fontFamily: 'OpenSans'
),),
Spacer(),
Icon(Icons.search, color: Colors.black, size: 6 * SizeConfig.imageSizeMultiplier,)
],
),
),
),
),
SizedBox(height: 5 * SizeConfig.heightMultiplier,),
TabBar(
controller: tabController,
indicatorColor: Colors.green,
indicatorWeight: 3.0,
labelColor: Colors.black,
unselectedLabelColor: Colors.grey,
isScrollable: true,
tabs: <Widget>[
Tab(
child: Text("Fruits", style: TextStyle(
fontSize: 2.5 * SizeConfig.textMultiplier,
fontFamily: 'OpenSans'
),),
),
Tab(
child: Text("Vegetables", style: TextStyle(
fontSize: 2.5 * SizeConfig.textMultiplier,
fontFamily: 'OpenSans'
),),
),
Tab(
child: Text("Nuts & Seeds", style: TextStyle(
fontSize: 2.5 * SizeConfig.textMultiplier,
fontFamily: 'OpenSans'
),),
),
Tab(
child: Text("Dairy", style: TextStyle(
fontSize: 2.5 * SizeConfig.textMultiplier,
fontFamily: 'OpenSans'
),),
),
]),
Expanded(
child: Container(
child: TabBarView(
controller: tabController,
children: <Widget>[
Fruits(),
Vegetables(),
Nuts(),
Dairy(),
]),
),
)
],
),
);
}
}Flutter Grocery Shopping App Code
Okay fine. In below I give full source code for flutter E-commerce grocery shopping cart application using dart. Dart has good documentation so you can easily rectify the issues. Nowadays most of peoples are purchase the groceries in online store. Behind the reason is they are giving offers, gift card, cashback and so many feature. In this project also we are adding those features which is liked by end users.