Flutter Ecomerce
Pertemuan 1
Ilham Maulana, 02 Mei 2020 Pukul 21:30
Goals
1. Membuat Project Baru Flutter
2. Membuat Icon dan Nama Aplikasi
3. Membuat SplashScreen
4. Membuat IntroScreen
5. Membuat HomeScreen
Buat Project Baru
flutter create -a kotlin -i swift --org=com.raihanmaulana --androidx --description="Toko Busana Muslim" raihanstore-a kotlin : bahasa native android
-i swift : bahasa native ios
--org : nama website
--androidx : menambahkan androidx
--description : deskripsi dari aplikasi
Tunggu sampai instalasi selesai
untuk membuka project silahkan ketikan perintah
Membuat Logo
Buka web https://www.freelogodesign.org/
sebagai contoh saya menggunakan logo ini
Buat folder assets/images
copykan file logo.png kedalam folder tersebut
Mendaftarkan File Assets
Buka file pubspec.yaml
Ubah baris 43 - 46 menjadi
Membuat Icon Launcher
Kita akan menggunakan package : flutter_launcher_icons
Tambahkan pada file pubspec.yaml
Download package dengan menekan crtl + s
buka terminal dan ketikan perintah
flutter pub get
flutter pub run flutter_launcher_icons:main
Maka akan secara otomatis membuat file launcher_icon.png pada folder mipmap
Merubah Nama Aplikasi
Buka File android\app\src\main\AndroidManifest.xml
Edit baris ke 10 dengan nama aplikasi
jalankan aplikasi dengan perintah
flutter run -d all
berikut tampilan icon dan nama aplikasi
Struktur Folder
Buat 3 buah folder pada folder lib
utils/my_navigator.dart
import 'package:flutter/material.dart';
class MyNavigator {
static void goToHome(BuildContext context) {
Navigator.pushNamed(context, "/home");
}
static void goToIntro(BuildContext context) {
Navigator.pushNamed(context, "/intro");
}
}
Berfungsi untuk membuat router atau penamaan tiap page
utils/my_language.dart
class MyLanguage {
static const String name = "Raihan Store";
static const String store = "Toko Busana Muslim";
static const String wt1 = "WELCOME";
static const String wc1 =
"Raihan Store - Toko Busana Muslim";
static const String wt2 = "Menarik";
static const String wc2 =
"Temukan desain busana yang menarik";
static const String wt3 = "Kemudahan";
static const String wc3 =
"Kemudahan dalam berbelanja, semudah jari anda";
static const String wt4 = "Terpecaya";
static const String wc4 =
"Kami toko online yang dipercaya sejak 2005";
static const String skip = "SKIP";
static const String next = "NEXT";
static const String gotIt = "GOT IT";
}
pages/splash_screen.dart
import 'dart:async';
import 'package:flutter/material.dart';
import '../utils/my_language.dart';
import '../utils/my_navigator.dart';
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
super.initState();
Timer(Duration(seconds: 5), () => MyNavigator.goToIntro(context));
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
decoration: BoxDecoration(color: Colors.redAccent),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.white,
radius: 50.0,
child: Icon(
Icons.shopping_cart,
color: Colors.red,
size: 50.0,
),
),
Padding(
padding: EdgeInsets.only(top: 10.0),
),
Text(
MyLanguage.name,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24.0),
)
],
),
),
),
Expanded(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(
backgroundColor: Colors.white,
),
Padding(
padding: EdgeInsets.only(top: 20.0),
),
Text(
MyLanguage.store,
softWrap: true,
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.white),
)
],
),
)
],
)
],
),
);
}
}
widgets/walkthrough.dart
import 'package:flutter/material.dart';
class Walkthrough extends StatefulWidget {
final title;
final content;
final imageIcon;
final imagecolor;
Walkthrough(
{this.title,
this.content,
this.imageIcon,
this.imagecolor = Colors.redAccent});
@override
WalkthroughState createState() {
return WalkthroughState();
}
}
class WalkthroughState extends State<Walkthrough>
with SingleTickerProviderStateMixin {
Animation animation;
AnimationController animationController;
@override
void initState() {
// TODO: implement initState
super.initState();
animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 500));
animation = Tween(begin: -250.0, end: 0.0).animate(
CurvedAnimation(parent: animationController, curve: Curves.easeInOut));
animation.addListener(() => setState(() {}));
animationController.forward();
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
animationController.dispose();
}
@override
Widget build(BuildContext context) {
return new Container(
padding: EdgeInsets.all(20.0),
child: Material(
animationDuration: Duration(milliseconds: 500),
elevation: 2.0,
borderRadius: BorderRadius.all(Radius.circular(5.0)),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Transform(
transform:
new Matrix4.translationValues(animation.value, 0.0, 0.0),
child: new Text(
widget.title,
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
new Transform(
transform:
new Matrix4.translationValues(animation.value, 0.0, 0.0),
child: new Text(widget.content,
softWrap: true,
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 15.0,
color: Colors.black)),
),
new Icon(
widget.imageIcon,
size: 100.0,
color: widget.imagecolor,
)
],
),
),
);
}
}
pages/intro_screen.dart
import 'package:flutter/material.dart';
import '../utils/my_language.dart';
import '../utils/my_navigator.dart';
import '../widgets/walkthrough.dart';
class IntroScreen extends StatefulWidget {
@override
IntroScreenState createState() {
return IntroScreenState();
}
}
class IntroScreenState extends State<IntroScreen> {
final PageController controller = new PageController();
int currentPage = 0;
bool lastPage = false;
void _onPageChanged(int page) {
setState(() {
currentPage = page;
if (currentPage == 3) {
lastPage = true;
} else {
lastPage = false;
}
});
}
@override
Widget build(BuildContext context) {
return Container(
color: Color(0xFFEEEEEE),
padding: EdgeInsets.all(10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 1,
child: Container(),
),
Expanded(
flex: 3,
child: PageView(
children: <Widget>[
Walkthrough(
title: MyLanguage.wt1,
content: MyLanguage.wc1,
imageIcon: Icons.mobile_screen_share,
),
Walkthrough(
title: MyLanguage.wt2,
content: MyLanguage.wc2,
imageIcon: Icons.search,
),
Walkthrough(
title: MyLanguage.wt3,
content: MyLanguage.wc3,
imageIcon: Icons.shopping_cart,
),
Walkthrough(
title: MyLanguage.wt4,
content: MyLanguage.wc4,
imageIcon: Icons.verified_user,
),
],
controller: controller,
onPageChanged: _onPageChanged,
),
),
Expanded(
flex: 1,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
FlatButton(
child: Text(lastPage ? "" : MyLanguage.skip,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 16.0)),
onPressed: () =>
lastPage ? null : MyNavigator.goToHome(context),
),
FlatButton(
child: Text(lastPage ? MyLanguage.gotIt : MyLanguage.next,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 16.0)),
onPressed: () => lastPage
? MyNavigator.goToHome(context)
: controller.nextPage(
duration: Duration(milliseconds: 300),
curve: Curves.easeIn),
),
],
),
)
],
),
);
}
}
pages/home_screen.dart
import 'package:flutter/material.dart';
import 'package:raihanstore/utils/my_language.dart';
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => new _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen>{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(MyLanguage.name),
actions: <Widget>[
Padding(
child: Icon(Icons.search),
padding: const EdgeInsets.only(right: 10.0),
)
],
),
drawer: Drawer(),
body: new Center(
child: Text("Home Screen"),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.amber,
onPressed: () => {},
child: Icon(Icons.shopping_cart, color: Colors.white),
),
);
}
}
lib/main.dart
import 'package:flutter/material.dart';
import './pages/home_screen.dart';
import './pages/intro_screen.dart';
import './pages/splash_screen.dart';
var routes = <String, WidgetBuilder>{
"/home": (BuildContext context) => HomeScreen(),
"/intro": (BuildContext context) => IntroScreen(),
};
void main() => runApp(new MaterialApp(
theme:
ThemeData(primaryColor: Colors.red, accentColor: Colors.redAccent),
debugShowCheckedModeBanner: false,
home: SplashScreen(),
routes: routes));
test/widget_test.dart
comment baris 11 & 16
jalankan aplikasi dengan perintah
flutter run -d all
SplashScreen
Intro Screen
Home Screen
Flutter Ecomerce 01
By flutter id
Flutter Ecomerce 01
Flutter Ecomerce 01
