Install Flutter Without AS
1. Download SDK Flutter
2. Download Command Line Tools Only
3. Download OpenJDK Terbaru
4. Download Vscode
5. Buat Folder
C:/android
6. Extraks Flutter SDK & SDK Tools, di Folder
C:/android/flutter
C:/android/tools
7. Install openJDK & Vscode di Folder
C:/android/openJDK
C:/android/Microsoft VS Code
8. Buka CMD Ketikan perintah dibawah untuk mengeset Environtment Variabel dan path
setx JAVA_HOME “C:\Android\openjdk”
setx ANDROID_HOME “C:\Android”
setx ANDROID_SDK_ROOT “C:\Android\tools”
setx path “%path%;”C:\Android\sdk;C:\Android\tools\bin;C:\Android\flutter\bin”
9. Buka CMD masuk ke Folder
sdkmanager “system-images;android-28;default;x86_64”
sdkmanager “platform-tools”
sdkmanager “build-tools;28.0.3”
sdkmanager “platforms;android-28”
sdkmanager —-update
Ketikan Perintah
C:/android/tools/bin
10. Cek Flutter dan Android Lisences dengan Perintah
flutter doctor --android-licenses
11. Buka VsCode, Install Extension
1. Dart
2. Flutter
3. Awesome Flutter Snippet
LAYOUT WIDGET
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
debugShowCheckedModeBanner: false,
title: "Flutter Talk 01",
theme: ThemeData(brightness: Brightness.light, primaryColor: Colors.blue),
home: new MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _title = "Layout Widget";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(_title),
),
body: _layout(context),
);
}
Widget _layout(BuildContext context) {
return SafeArea(
child: Container(
child: Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Text(_title),
],
),
),
),
),
);
}
}
BUTTON WIDGET
FlatButton
FlatButton(
color: Colors.blue,
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.all(8.0),
splashColor: Colors.blueAccent,
onPressed: () {},
child: Text(
"Flat Button",
style: TextStyle(fontSize: 20.0),
),
),
FlatButton + Icon
FlatButton.icon(
color: Colors.green,
icon: Icon(Icons.add_a_photo), //`Icon` to display
label: Text('Flat Button With Icon'), //`Text` to display
onPressed: () {},
),
Custom Flat Button
import 'package:flutter/material.dart';
class CustomFlatButton extends StatelessWidget {
final String title;
final Color textColor;
final double fontSize;
final FontWeight fontWeight;
final VoidCallback onPressed;
final Color color;
final Color splashColor;
final Color borderColor;
final double borderWidth;
CustomFlatButton(
{this.title,
this.textColor,
this.fontSize,
this.fontWeight,
this.onPressed,
this.color,
this.splashColor,
this.borderColor,
this.borderWidth});
@override
Widget build(BuildContext context) {
return FlatButton(
onPressed: onPressed,
color: color,
splashColor: splashColor,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 12.0),
child: Text(
title,
softWrap: true,
textAlign: TextAlign.center,
style: TextStyle(
color: textColor,
decoration: TextDecoration.none,
fontSize: fontSize,
fontWeight: fontWeight,
),
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
side: BorderSide(
color: borderColor,
width: borderWidth,
),
),
);
}
}
CustomFlatButton(
title: "Custom Flat Button",
textColor: Colors.white,
color: Colors.red,
fontSize: 15.0,
fontWeight: FontWeight.bold,
borderWidth: 1,
borderColor: Colors.grey,
onPressed: () { _changeTitle("Custom Flat Button",Colors.black.withOpacity(0.5)); },
),
RaisedButton
RaisedButton(
onPressed: () { _changeTitle("Raised Button",Colors.red.withOpacity(0.5)); },
textColor: Colors.white,
padding: const EdgeInsets.all(0.0),
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: <Color>[
Color(0xFF0D47A1),
Color(0xFF1976D2),
Color(0xFF42A5F5),
],
),
),
padding: const EdgeInsets.all(10.0),
child: const Text('Raised Button',
style: TextStyle(fontSize: 20)),
),
),
MaterialButton
Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(30.0),
color: Colors.blue.withOpacity(0.7),
child: MaterialButton(
padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () { _changeTitle("Material Button",Colors.green.withOpacity(0.5)); },
child: Text("Material Button",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),
),
),
),
InkWell
Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.circular(30),
onTap: () { _changeTitle("InkWell",Colors.orange.withOpacity(0.5)); },
splashColor: Colors.blue,
highlightColor: Colors.blue,
child: Container(
height: 36,
width: 240,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(color: Colors.grey),
),
child: Center(
child: Text("InkWell"),
),
),
),
),
InkWell + Icon
SizedBox.fromSize(
size: Size(56, 56), // button width and height
child: ClipOval(
child: Material(
color: Colors.orange, // button color
child: InkWell(
splashColor: Colors.green, // splash color
onTap: () { _changeTitle("InkWell With Icon",Colors.red.withOpacity(0.5)); },
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.call), // icon
Text("Call"), // text
],
),
),
),
),
),
SignInButton
SignInButton(
Buttons.Google,
text: "Login dengan Google",
onPressed: () { _changeTitle("Signin Button Google",Colors.green.withOpacity(0.5)); },
),
SignInButtonBuilder(
text: 'Login dengan Email',
icon: Icons.email,
onPressed: () { _changeTitle("Signin Button Email",Colors.red.withOpacity(0.5)); },
backgroundColor: Colors.blueGrey[700],
),
SignInButtonBuilder(
text: 'Login dengan Email',
icon: Icons.email,
onPressed: () { _changeTitle("Signin Button Mini",Colors.black.withOpacity(0.5)); },
backgroundColor: Colors.blueGrey[700],
mini: true,
),
flutter_signin_button: ^1.0.0
NiceButton
NiceButton(
radius: 40,
padding: const EdgeInsets.all(15),
text: "Register",
icon: Icons.account_box,
background: Colors.blue,
gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
onPressed: () { _changeTitle("Nice Button",Colors.red.withOpacity(0.5)); },
),
Full Code
import 'package:flutter/material.dart';
import 'custom_flat_button.dart';
import 'package:flutter_signin_button/flutter_signin_button.dart';
import 'package:nice_button/NiceButton.dart';
void main() {
runApp(new MaterialApp(
debugShowCheckedModeBanner: false,
title: "Flutter Talk 01",
theme: ThemeData(brightness: Brightness.light, primaryColor: Colors.red),
home: new MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _title = "Button Widget";
Color _bgColor = Colors.white;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(_title),
),
body: _layout(context),
);
}
void _changeTitle(String title, Color bgColor){
setState(() {
_title = title;
_bgColor = bgColor;
});
}
Widget _layout(BuildContext context) {
return SafeArea(
child: Container(
color: _bgColor,
child: Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
FlatButton(
color: Colors.blue,
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.all(8.0),
splashColor: Colors.blueAccent,
onPressed: () { _changeTitle("Flat Button",Colors.yellow.withOpacity(0.5)); },
child: Text(
"Flat Button",
style: TextStyle(fontSize: 20.0),
),
),
SizedBox(height: 30),
FlatButton.icon(
color: Colors.green,
icon: Icon(Icons.add_a_photo), //`Icon` to display
label: Text('Flat Button With Icon'), //`Text` to display
onPressed: () { _changeTitle("Flat Button With Icon",Colors.red.withOpacity(0.5)); },
),
SizedBox(height: 30),
CustomFlatButton(
title: "Custom Flat Button",
textColor: Colors.white,
color: Colors.red,
fontSize: 15.0,
fontWeight: FontWeight.bold,
borderWidth: 1,
borderColor: Colors.grey,
onPressed: () { _changeTitle("Custom Flat Button",Colors.black.withOpacity(0.5)); },
),
SizedBox(height: 30),
RaisedButton(
onPressed: () { _changeTitle("Raised Button",Colors.red.withOpacity(0.5)); },
textColor: Colors.white,
padding: const EdgeInsets.all(0.0),
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: <Color>[
Color(0xFF0D47A1),
Color(0xFF1976D2),
Color(0xFF42A5F5),
],
),
),
padding: const EdgeInsets.all(10.0),
child: const Text('Raised Button',
style: TextStyle(fontSize: 20)),
),
),
SizedBox(height: 30),
Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(30.0),
color: Colors.blue.withOpacity(0.7),
child: MaterialButton(
padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () { _changeTitle("Material Button",Colors.green.withOpacity(0.5)); },
child: Text("Material Button",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),
),
),
),
SizedBox(height: 30),
Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.circular(30),
onTap: () { _changeTitle("InkWell",Colors.orange.withOpacity(0.5)); },
splashColor: Colors.blue,
highlightColor: Colors.blue,
child: Container(
height: 36,
width: 240,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(color: Colors.grey),
),
child: Center(
child: Text("InkWell"),
),
),
),
),
SizedBox(height: 30),
SizedBox.fromSize(
size: Size(56, 56), // button width and height
child: ClipOval(
child: Material(
color: Colors.orange, // button color
child: InkWell(
splashColor: Colors.green, // splash color
onTap: () { _changeTitle("InkWell With Icon",Colors.red.withOpacity(0.5)); },
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.call), // icon
Text("Call"), // text
],
),
),
),
),
),
SizedBox(height: 30),
SignInButton(
Buttons.Google,
text: "Login dengan Google",
onPressed: () { _changeTitle("Signin Button Google",Colors.green.withOpacity(0.5)); },
),
SignInButtonBuilder(
text: 'Login dengan Email',
icon: Icons.email,
onPressed: () { _changeTitle("Signin Button Email",Colors.red.withOpacity(0.5)); },
backgroundColor: Colors.blueGrey[700],
),
SignInButtonBuilder(
text: 'Login dengan Email',
icon: Icons.email,
onPressed: () { _changeTitle("Signin Button Mini",Colors.black.withOpacity(0.5)); },
backgroundColor: Colors.blueGrey[700],
mini: true,
),
SizedBox(height: 30),
NiceButton(
radius: 40,
padding: const EdgeInsets.all(15),
text: "Register",
icon: Icons.account_box,
background: Colors.blue,
gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
onPressed: () { _changeTitle("Nice Button",Colors.red.withOpacity(0.5)); },
),
SizedBox(height: 30),
],
),
),
),
),
);
}
}
NOTIFICATION WIDGET
ModalBottomSheet
void _showBottom() {
showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return new Container(
padding: new EdgeInsets.all(5.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text('Ini Modal Bottom Sheet', style: new TextStyle(color: Colors.white),),
SizedBox(width: 50),
new RaisedButton(onPressed: () => Navigator.pop(context), child: new Text('Close'),)
],
),
);
}
);
}
SnackBar
final GlobalKey<ScaffoldState> _scaffoldstate = new GlobalKey<ScaffoldState>();
void _showSnackbar() {
_scaffoldstate.currentState.showSnackBar(
SnackBar(
content: Text('Ini Snack Bar',style: TextStyle(color: Colors.white),),
backgroundColor: Colors.blue,
action: SnackBarAction(
label: 'x',
onPressed: () {},
),
)
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldstate,
appBar: AppBar(
title: Text(_title),
),
body: _layout(context),
);
}
Dialog
Future _showAlert(BuildContext context, String message) async {
return showDialog(
context: context,
child: new AlertDialog(
title: new Text(message),
actions: <Widget>[
new FlatButton(onPressed: () => Navigator.pop(context), child: new Text('Ok'))
],
)
);
}
Simple Dialog
void _setValue(String value) => setState(() => _title = value);
Future _askUser() async {
switch(
await showDialog(
context: context,
child: new SimpleDialog(
title: new Text('Do you like Flutter?'),
children: <Widget>[
new SimpleDialogOption(child: new Text('Yes!!!'),onPressed: (){Navigator.pop(context, Answers.YES);},),
new SimpleDialogOption(child: new Text('NO :('),onPressed: (){Navigator.pop(context, Answers.NO);},),
new SimpleDialogOption(child: new Text('Maybe :|'),onPressed: (){Navigator.pop(context, Answers.MAYBE);},),
],
)
)
) {
case Answers.YES:
_setValue('Yes');
break;
case Answers.NO:
_setValue('No');
break;
case Answers.MAYBE:
_setValue('Maybe');
break;
}
}
SweetAlert
void _showSweetALert(BuildContext context,String title, String subtitle, SweetAlertStyle style){
return SweetAlert.show(context, title: title, subtitle: subtitle, style: style);
}
void _showSweetALert2(){
SweetAlert.show(context,
subtitle: "Do you want to delete this message",
style: SweetAlertStyle.confirm,
showCancelButton: true, onPress: (bool isConfirm) {
if(isConfirm){
SweetAlert.show(context,subtitle: "Deleting...", style: SweetAlertStyle.loading);
new Future.delayed(new Duration(seconds: 2),(){
SweetAlert.show(context,subtitle: "Success!", style: SweetAlertStyle.success);
});
}else{
SweetAlert.show(context,subtitle: "Canceled!", style: SweetAlertStyle.error);
}
// return false to keep dialog
return false;
});
}
sweetalert: ^0.0.1
Full Code
import 'package:flutter/material.dart';
import 'package:nice_button/nice_button.dart';
import 'dart:async';
import 'package:sweetalert/sweetalert.dart';
void main() {
runApp(new MaterialApp(
debugShowCheckedModeBanner: false,
title: "Flutter Talk 01",
theme: ThemeData(brightness: Brightness.dark, primaryColor: Colors.blueAccent),
home: new MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
enum Answers{YES,NO,MAYBE}
class _MyAppState extends State<MyApp> {
String _title = "Notification Widget";
Color _bgColor = Colors.white;
final GlobalKey<ScaffoldState> _scaffoldstate = new GlobalKey<ScaffoldState>();
void _showBottom() {
showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return new Container(
padding: new EdgeInsets.all(5.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text('Ini Modal Bottom Sheet', style: new TextStyle(color: Colors.white),),
SizedBox(width: 50),
new RaisedButton(onPressed: () => Navigator.pop(context), child: new Text('Close'),)
],
),
);
}
);
}
void _showSnackbar() {
_scaffoldstate.currentState.showSnackBar(
SnackBar(
content: Text('Ini Snack Bar',style: TextStyle(color: Colors.white),),
backgroundColor: Colors.blue,
action: SnackBarAction(
label: 'x',
onPressed: () {},
),
)
);
}
Future _showAlert(BuildContext context, String message) async {
return showDialog(
context: context,
child: new AlertDialog(
title: new Text(message),
actions: <Widget>[
new FlatButton(onPressed: () => Navigator.pop(context), child: new Text('Ok'))
],
)
);
}
void _setValue(String value) => setState(() => _title = value);
Future _askUser() async {
switch(
await showDialog(
context: context,
child: new SimpleDialog(
title: new Text('Do you like Flutter?'),
children: <Widget>[
new SimpleDialogOption(child: new Text('Yes!!!'),onPressed: (){Navigator.pop(context, Answers.YES);},),
new SimpleDialogOption(child: new Text('NO :('),onPressed: (){Navigator.pop(context, Answers.NO);},),
new SimpleDialogOption(child: new Text('Maybe :|'),onPressed: (){Navigator.pop(context, Answers.MAYBE);},),
],
)
)
) {
case Answers.YES:
_setValue('Yes');
break;
case Answers.NO:
_setValue('No');
break;
case Answers.MAYBE:
_setValue('Maybe');
break;
}
}
void _showSweetALert(BuildContext context,String title, String subtitle, SweetAlertStyle style){
return SweetAlert.show(context, title: title, subtitle: subtitle, style: style);
}
void _showSweetALert2(){
SweetAlert.show(context,
subtitle: "Do you want to delete this message",
style: SweetAlertStyle.confirm,
showCancelButton: true, onPress: (bool isConfirm) {
if(isConfirm){
SweetAlert.show(context,subtitle: "Deleting...", style: SweetAlertStyle.loading);
new Future.delayed(new Duration(seconds: 2),(){
SweetAlert.show(context,subtitle: "Success!", style: SweetAlertStyle.success);
});
}else{
SweetAlert.show(context,subtitle: "Canceled!", style: SweetAlertStyle.error);
}
// return false to keep dialog
return false;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldstate,
appBar: AppBar(
title: Text(_title),
),
body: _layout(context),
);
}
Widget _layout(BuildContext context) {
return SafeArea(
child: Container(
color: _bgColor,
child: Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
NiceButton(
radius: 40,
padding: const EdgeInsets.all(15),
text: "ModalBottomSheet",
icon: Icons.notifications,
background: Colors.blue,
gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
onPressed: () { _showBottom(); },
),
SizedBox(height: 30),
NiceButton(
radius: 40,
padding: const EdgeInsets.all(15),
text: "Snackbar",
icon: Icons.notifications,
background: Colors.blue,
gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
onPressed: () { _showSnackbar(); },
),
SizedBox(height: 30),
NiceButton(
radius: 40,
padding: const EdgeInsets.all(15),
text: "Dialog",
icon: Icons.notifications,
background: Colors.blue,
gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
onPressed: () { _showAlert(context, 'Ini Dialog'); },
),
SizedBox(height: 30),
NiceButton(
radius: 40,
padding: const EdgeInsets.all(15),
text: "Simple Dialog",
icon: Icons.notifications,
background: Colors.blue,
gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
onPressed: () { _askUser(); },
),
SizedBox(height: 30),
NiceButton(
radius: 40,
padding: const EdgeInsets.all(15),
text: "Sweet Alert",
icon: Icons.notifications,
background: Colors.blue,
gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
onPressed: () { _showSweetALert(context, 'ALert', 'Terima Kasih', SweetAlertStyle.success); },
),
SizedBox(height: 30),
NiceButton(
radius: 40,
padding: const EdgeInsets.all(15),
text: "Sweet Alert Confirm",
icon: Icons.notifications,
background: Colors.blue,
gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
onPressed: () { _showSweetALert2(); },
),
SizedBox(height: 30),
],
),
),
),
),
);
}
}
NAVIGATION
WIDGET
Navigator.push
NiceButton(
radius: 40,
padding: const EdgeInsets.all(15),
text: "Profile",
icon: Icons.people,
background: Colors.blue,
gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
onPressed: () {
Route route =
MaterialPageRoute(builder: (context) => Profile());
Navigator.push(context, route);
}),
Navigator.pop
NiceButton(
radius: 40,
padding: const EdgeInsets.all(15),
text: "Back",
icon: Icons.navigate_before,
background: Colors.blue,
gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
onPressed: () {
Navigator.pop(context);
}
),
WillPopScope
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () => _onWillPop(),
child: Scaffold(
appBar: AppBar(
title: Text(_title),
),
body: _layout(context),
),
);
}
_onWillPop(){
SweetAlert.show(context,
subtitle: "Do you want to Exit Application?",
style: SweetAlertStyle.confirm,
showCancelButton: true, onPress: (bool isConfirm) {
if(isConfirm){
SweetAlert.show(context,subtitle: "Exit App...", style: SweetAlertStyle.loading);
new Future.delayed(new Duration(seconds: 2),(){
exit(1);
});
}else{
SweetAlert.show(context,subtitle: "Canceled!", style: SweetAlertStyle.error);
}
return false;
});
}
Full Code main.dart
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:sweetalert/sweetalert.dart';
import 'package:nice_button/nice_button.dart';
import 'profile.dart';
void main() {
runApp(new MaterialApp(
debugShowCheckedModeBanner: false,
title: "Flutter Talk 01",
theme: ThemeData(brightness: Brightness.dark, primaryColor: Colors.blue),
home: new MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _title = "Navigation Widget";
Color _bgColor = Colors.grey.shade100;
_onWillPop(){
SweetAlert.show(context,
subtitle: "Do you want to Exit Application?",
style: SweetAlertStyle.confirm,
showCancelButton: true, onPress: (bool isConfirm) {
if(isConfirm){
SweetAlert.show(context,subtitle: "Exit App...", style: SweetAlertStyle.loading);
new Future.delayed(new Duration(seconds: 2),(){
exit(1);
});
}else{
SweetAlert.show(context,subtitle: "Canceled!", style: SweetAlertStyle.error);
}
return false;
});
}
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () => _onWillPop(),
child: Scaffold(
appBar: AppBar(
title: Text(_title),
),
body: _layout(context),
),
);
}
Widget _layout(BuildContext context) {
return SafeArea(
child: Container(
color: _bgColor,
child: Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
NiceButton(
radius: 40,
padding: const EdgeInsets.all(15),
text: "Profile",
icon: Icons.people,
background: Colors.blue,
gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
onPressed: () {
Route route =
MaterialPageRoute(builder: (context) => Profile());
Navigator.push(context, route);
}),
SizedBox(height: 30),
],
),
),
),
),
);
}
}
profile.dart
import 'package:flutter/material.dart';
import 'package:nice_button/nice_button.dart';
class Profile extends StatefulWidget {
@override
_ProfileState createState() => _ProfileState();
}
class _ProfileState extends State<Profile> {
String _title = "Profile Page";
Color _bgColor = Colors.yellow.shade100;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(_title),
),
body: _layout(context),
);
}
Widget _layout(BuildContext context) {
return SafeArea(
child: Container(
color: _bgColor,
child: Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
NiceButton(
radius: 40,
padding: const EdgeInsets.all(15),
text: "Back",
icon: Icons.navigate_before,
background: Colors.blue,
gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
onPressed: () {
Navigator.pop(context);
}
),
SizedBox(height: 30),
],
),
),
),
),
);
}
}
INPUT
WIDGET
TextField
Container(
padding: EdgeInsets.all(10),
child: new TextField(
decoration: new InputDecoration(
labelText: 'Masukan Nama Kamu',
hintText: 'Masukan Nama Kamu',
icon: new Icon(Icons.message)
),
autocorrect: true,
autofocus: true,
keyboardType: TextInputType.text,
onChanged: _onChange,
)
),
CheckBox
new CheckboxListTile(
value: _value,
onChanged: _cbChanged,
title: new Text('Setuju dengan persyaratan diatas'),
activeColor: Colors.blue,
),
SizedBox(height: 30),
Full Code
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:sweetalert/sweetalert.dart';
import 'package:nice_button/nice_button.dart';
void main() {
runApp(new MaterialApp(
debugShowCheckedModeBanner: false,
title: "Flutter Talk 01",
theme: ThemeData(brightness: Brightness.light, primaryColor: Colors.blue),
home: new MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _title = "Input Widget";
Color _bgColor = Colors.white;
bool _value = false;
void _cbChanged(bool value){
setState(() {
_value = value;
_title = _value.toString();
});
}
_onWillPop(){
SweetAlert.show(context,
subtitle: "Do you want to Exit Application?",
style: SweetAlertStyle.confirm,
showCancelButton: true, onPress: (bool isConfirm) {
if(isConfirm){
SweetAlert.show(context,subtitle: "Exit App...", style: SweetAlertStyle.loading);
new Future.delayed(new Duration(seconds: 2),(){
exit(1);
});
}else{
SweetAlert.show(context,subtitle: "Canceled!", style: SweetAlertStyle.error);
}
return false;
});
}
void _onChange(String value) {
setState(() => _title = '${value}');
}
void _onSubmit() {
if(_value){
if(_title.isNotEmpty){
SweetAlert.show(context,title: "Alert",subtitle: _title.toString(),style: SweetAlertStyle.success);
}else{
SweetAlert.show(context,title: "Alert",subtitle: 'Empty',style: SweetAlertStyle.error);
}
}else{
SweetAlert.show(context,title: "Alert",subtitle: 'Please cek persyatan diatas',style: SweetAlertStyle.error);
}
}
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () => _onWillPop(),
child: Scaffold(
appBar: AppBar(
title: Text(_title),
),
body: _layout(context),
),
);
}
Widget _layout(BuildContext context) {
return SafeArea(
child: Container(
child: Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
child: new TextField(
decoration: new InputDecoration(
labelText: 'Masukan Nama Kamu',
hintText: 'Masukan Nama Kamu',
icon: new Icon(Icons.message)
),
autocorrect: true,
autofocus: true,
keyboardType: TextInputType.text,
onChanged: _onChange,
)
),
SizedBox(height: 30),
new CheckboxListTile(
value: _value,
onChanged: _cbChanged,
title: new Text('Setuju dengan persyaratan diatas'),
activeColor: Colors.blue,
),
SizedBox(height: 30),
NiceButton(
radius: 40,
padding: const EdgeInsets.all(15),
text: "Submit",
icon: Icons.send,
background: Colors.blue,
gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
onPressed: () {
_onSubmit();
}),
SizedBox(height: 30),
],
),
),
),
),
);
}
}
STATE
MANAGEMENT
SEND DATA
main.dart
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:sweetalert/sweetalert.dart';
import 'package:nice_button/nice_button.dart';
import 'profile.dart';
void main() {
runApp(new MaterialApp(
debugShowCheckedModeBanner: false,
title: "Flutter Talk 01",
theme: ThemeData(brightness: Brightness.light, primaryColor: Colors.blue),
home: new MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _title = "State Management";
TextEditingController _name;
_onWillPop(){
SweetAlert.show(context,
subtitle: "Do you want to Exit Application?",
style: SweetAlertStyle.confirm,
showCancelButton: true, onPress: (bool isConfirm) {
if(isConfirm){
SweetAlert.show(context,subtitle: "Exit App...", style: SweetAlertStyle.loading);
new Future.delayed(new Duration(seconds: 2),(){
exit(1);
});
}else{
SweetAlert.show(context,subtitle: "Canceled!", style: SweetAlertStyle.error);
}
return false;
});
}
@override
void initState() {
super.initState();
_name = new TextEditingController();
}
void _onPressed() {
Navigator.push(context, new MaterialPageRoute(
builder: (BuildContext context) => new Profile(_name.text),
));
}
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () => _onWillPop(),
child: Scaffold(
appBar: AppBar(
title: Text(_title),
),
body: _layout(context),
),
);
}
Widget _layout(BuildContext context) {
return SafeArea(
child: Container(
child: Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.all(10),
child: new TextField(
controller: _name,
decoration: new InputDecoration(labelText: 'Enter your name'),
),
),
SizedBox(height: 30),
NiceButton(
radius: 40,
padding: const EdgeInsets.all(15),
text: "Submit",
icon: Icons.send,
background: Colors.blue,
gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
onPressed: () {
_onPressed();
}),
SizedBox(height: 30),
],
),
),
),
),
);
}
}
profile.dart
import 'package:flutter/material.dart';
import 'package:sweetalert/sweetalert.dart';
import 'package:nice_button/nice_button.dart';
class Profile extends StatefulWidget {
Profile(this.name);
String name;
@override
_ProfileState createState() => _ProfileState(name);
}
class _ProfileState extends State<Profile> {
_ProfileState(this.name);
String name;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(name),
),
body: _layout(context),
);
}
Widget _layout(BuildContext context) {
return SafeArea(
child: Container(
child: Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
new Text('Hello ${name}'),
NiceButton(
radius: 40,
padding: const EdgeInsets.all(15),
text: "Back",
icon: Icons.backspace,
background: Colors.blue,
gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
onPressed: () {
Navigator.of(context).pop();
}),
SizedBox(height: 30),
],
),
),
),
),
);
}
}
GLOBAL STATE
globalstate.dart
class GlobalState {
final Map<dynamic, dynamic> _data = {};
static GlobalState instance = new GlobalState._();
GlobalState._();
set(key, value) => _data[key] = value;
get(key) => _data[key];
}
main.dart
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:sweetalert/sweetalert.dart';
import 'package:nice_button/nice_button.dart';
import 'profile.dart';
import 'globalstate.dart';
void main() {
runApp(new MaterialApp(
debugShowCheckedModeBanner: false,
title: "Flutter Talk 01",
theme: ThemeData(brightness: Brightness.light, primaryColor: Colors.blue),
home: new MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _title = "State Management";
TextEditingController _name;
GlobalState _store = GlobalState.instance;
_onWillPop(){
SweetAlert.show(context,
subtitle: "Do you want to Exit Application?",
style: SweetAlertStyle.confirm,
showCancelButton: true, onPress: (bool isConfirm) {
if(isConfirm){
SweetAlert.show(context,subtitle: "Exit App...", style: SweetAlertStyle.loading);
new Future.delayed(new Duration(seconds: 2),(){
exit(1);
});
}else{
SweetAlert.show(context,subtitle: "Canceled!", style: SweetAlertStyle.error);
}
return false;
});
}
@override
void initState() {
super.initState();
_name = new TextEditingController();
_store.set('value', 0);
}
void _increment() {
int value = _store.get('value');
value++;
setState(() => _store.set('value', value));
}
void _decrement() {
int value = _store.get('value');
if(value>0) value--;
setState(() => _store.set('value', value));
}
void _onPressed() {
Navigator.push(context, new MaterialPageRoute(
builder: (BuildContext context) => new Profile(_name.text),
));
}
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () => _onWillPop(),
child: Scaffold(
appBar: AppBar(
title: Text(_title),
),
body: _layout(context),
),
);
}
Widget _layout(BuildContext context) {
return SafeArea(
child: Container(
child: Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.all(10),
child: new TextField(
controller: _name,
decoration: new InputDecoration(labelText: 'Enter your name'),
),
),
SizedBox(height: 30),
NiceButton(
radius: 40,
padding: const EdgeInsets.all(15),
text: "Submit",
icon: Icons.send,
background: Colors.blue,
gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
onPressed: () {
_onPressed();
}),
SizedBox(height: 30),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
NiceButton(
radius: 40,
padding: const EdgeInsets.all(15),
text: "",
mini: true,
icon: Icons.arrow_drop_up,
background: Colors.blue,
gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
onPressed: () {
_increment();
}),
NiceButton(
radius: 40,
padding: const EdgeInsets.all(15),
text: "",
mini: true,
icon: Icons.arrow_drop_down,
background: Colors.blue,
gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
onPressed: () {
_decrement();
}),
],
),
SizedBox(height: 30),
new Text('Value ${_store.get('value')}',style: TextStyle(fontSize: 30),),
SizedBox(height: 30),
],
),
),
),
),
);
}
}
profile.dart
import 'package:flutter/material.dart';
import 'package:sweetalert/sweetalert.dart';
import 'package:nice_button/nice_button.dart';
import 'globalstate.dart';
class Profile extends StatefulWidget {
Profile(this.name);
String name;
@override
_ProfileState createState() => _ProfileState(name);
}
class _ProfileState extends State<Profile> {
GlobalState _store = GlobalState.instance;
_ProfileState(this.name);
String name;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(name),
),
body: _layout(context),
);
}
Widget _layout(BuildContext context) {
return SafeArea(
child: Container(
child: Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
new Text('Name : ${name}',style: TextStyle(fontSize: 30.0),),
SizedBox(height: 30),
new Text('Value : ${_store.get('value')}',style: TextStyle(fontSize: 30.0)),
SizedBox(height: 30),
NiceButton(
radius: 40,
padding: const EdgeInsets.all(15),
text: "Back",
icon: Icons.backspace,
background: Colors.blue,
gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
onPressed: () {
Navigator.of(context).pop();
}),
SizedBox(height: 30),
],
),
),
),
),
);
}
}
STUDI KASUS
KALKULATOR ZAKAT
PUBSPEC.YAML
name: aplikasi_zakat
description: A new Flutter project.
version: 1.0.0+1
environment:
sdk: ">=2.1.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
nice_button: ^0.1.7
sweetalert: ^0.0.1
pattern_formatter: ^1.0.0
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
globalstate.dart
class GlobalState {
final Map<dynamic, dynamic> _data = {};
static GlobalState instance = new GlobalState._();
GlobalState._();
set(key, value) => _data[key] = value;
get(key) => _data[key];
}
main.dart
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:sweetalert/sweetalert.dart';
import 'package:nice_button/nice_button.dart';
import 'package:pattern_formatter/pattern_formatter.dart';
import 'globalstate.dart';
import 'hasil.dart';
void main() {
runApp(new MaterialApp(
debugShowCheckedModeBanner: false,
title: "Kalkulator Zakat",
theme: ThemeData(brightness: Brightness.light, primaryColor: Colors.blue),
home: new MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _title = "Kalkulator Zakat";
final TextEditingController _name = new TextEditingController();
final TextEditingController _total = new TextEditingController();
GlobalState _store = GlobalState.instance;
_onWillPop(){
SweetAlert.show(context,
subtitle: "Do you want to Exit Application?",
style: SweetAlertStyle.confirm,
showCancelButton: true, onPress: (bool isConfirm) {
if(isConfirm){
SweetAlert.show(context,subtitle: "Exit App...", style: SweetAlertStyle.loading);
new Future.delayed(new Duration(seconds: 2),(){
exit(1);
});
}else{
SweetAlert.show(context,subtitle: "Canceled!", style: SweetAlertStyle.error);
}
return false;
});
}
@override
void initState() {
super.initState();
_store.set('value', 0);
}
void _hitungZakat() {
num value = _store.get('value');
num nilai = num.parse(_total.text.replaceAll(",", ""));
if(nilai>=5240000){
num zakat = (2.5/100) * nilai;
value = zakat;
setState(() => _store.set('value', value));
Navigator.push(context, new MaterialPageRoute(
builder: (BuildContext context) => new Hasil(),
));
}else{
String name = _name.text.toUpperCase().toString();
SweetAlert.show(context,subtitle:" Pendapatan $name Belum mencapai Nishab", style: SweetAlertStyle.error);
}
}
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () => _onWillPop(),
child: Scaffold(
appBar: AppBar(
title: Text(_title),
),
body: _layout(context),
),
);
}
Widget _layout(BuildContext context) {
return SafeArea(
child: Container(
child: Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(10),
child: new TextField(
controller: _name,
decoration: new InputDecoration(labelText: 'Masukan Nama Kamu'),
),
),
Container(
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(10),
child: new TextField(
controller: _total,
decoration: new InputDecoration(labelText: 'Masukan Total Pendapatan'),
keyboardType: TextInputType.number,
inputFormatters: [
ThousandsFormatter(allowFraction: true)
],
),
),
SizedBox(height: 30),
NiceButton(
radius: 40,
padding: const EdgeInsets.all(15),
text: "Hitung Zakat",
icon: Icons.refresh,
background: Colors.blue,
gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
onPressed: () {
_hitungZakat();
}),
SizedBox(height: 30),
],
),
),
),
),
);
}
}
hasil.dart
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:sweetalert/sweetalert.dart';
import 'package:nice_button/nice_button.dart';
import 'globalstate.dart';
class Hasil extends StatefulWidget {
@override
_HasilState createState() => _HasilState();
}
class _HasilState extends State<Hasil> {
String _title = "Hasil Kalkulasi";
GlobalState _store = GlobalState.instance;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(_title),
),
body: _layout(context),
);
}
Widget _layout(BuildContext context) {
return SafeArea(
child: Container(
child: Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
new Text('Total Zakat : ${_store.get('value')}',style: TextStyle(fontSize: 30.0)),
SizedBox(height: 30),
NiceButton(
radius: 40,
padding: const EdgeInsets.all(15),
text: "Hitung Lagi",
icon: Icons.repeat,
background: Colors.blue,
gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
onPressed: () {
Navigator.pop(context);
}),
SizedBox(height: 30),
],
),
),
),
),
);
}
}
RELEASE APK
flutter build apk
flutter build apk --target-platform android-arm,android-arm64,android-x64 --split-per-abi
Coding Talk #01 : ALL ABOUT WIDGET FLUTTER
By Maulana Ilham
Coding Talk #01 : ALL ABOUT WIDGET FLUTTER
ALL ABOUT WIDGET FLUTTER
- 1,529