Are you a Flutter developer? If so, you’ll know that code snippets can be a life-saver. They’re perfect for when you need to quickly prototype an idea, or when you want to dive into someone else’s code. In this post, we’ve collected some of our favorite Flutter code snippets. Whether you’re just getting started with Flutter or you’re looking for new ways to improve your development process, we hope you find these Flutter code examples and snippets helpful!
Table of Contents
Curated List of Dart & Flutter Code Examples and Snippets
Animation
WaveContainer( width: double.infinity, height: 50, waveColor: Colors.orangeAccent)
Array & List
final list = ['', 'Sample','', 100, null, 32, 999999999, false]; list.removeWhere((item) => [null, false, ''].contains(item)); //output: ['Sample', 100, 32, 999999999] final list = ['', 'Samsung','', 'Apple']; list.removeWhere((item) => item.isEmpty); //output: ['Samsung', 'Apple']
import 'package:flutter/foundation.dart'; List<int> list1 = [0, 3, 6, 9]; List<int> list2 = [0, 3, 6, 9]; print(listEquals(list1, list2)); //true List<int> list1 = [0, 3, 6, 9]; List<int> list2 = [3, 0, 6, 9]; print(listEquals(list1, list2)); //false
Map<int, String> products = {
2: "Amethyst +Strawberry Crystal",
5: "Bag Charm",
7: "Christmas Charms",
11: "Lenovo Legion",
57: "Asus ROG Strix",
102: "HP pavilion",
};
products.forEach((key, value) {
print("$key: $value");
});
for(var key in products.keys){
print("$key: $map[$key]");
}
for (MapEntry e in products.entries) {
print("${e.key}: ${e.value}");
}
for (var value in products.values) {
print(value);
}for (var item in myList) {
await callOther(item);
}
await Future.forEach(myList, (item) async {
await anotherFutureFunction(item);
});
await searchRead(saleTable, args, params).then((items) async {
for (var i = 0; i < items.length; i++) {
Sale sale = Sale.fromJson(items[i]);
sale.product = await searchProductById(sale.product_id);
}
})Button
DecoratedBox(
decoration: const BoxDecoration(gradient: const LinearGradient(colors: [Colors.indigo, Colors.blueAccent])),
child: Container(
color: Colors.white,
margin: const EdgeInsets.all(2.0),
child: TextButton(
onPressed: () {},
child: const Text("Gradient Button"),
),
),
)OutlinedButton(
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
side: const BorderSide(width: 2, color: Colors.green),
),
onPressed: () {},
child: Text('OutlinedButton'),
),import 'package:flutter/material.dart';
class NetworkButton extends StatefulWidget {
final bool? isVertical;
final Function? onTap;
final Color? backgroundColor;
final Color? splashColor;
final Color? textColor;
final String? text;
final TextStyle? textStyle;
final IconData? iconData;
final Color? iconColor;
final double? iconSize;
final int? delayMls;
final EdgeInsetsGeometry? edgeInset;
const NetworkButton({
Key? key,
this.onTap,
this.backgroundColor,
this.splashColor,
this.textColor,
this.text,
this.iconData,
this.isVertical,
this.iconColor,
this.iconSize,
this.textStyle,
this.delayMls,
this.edgeInset,
}) : super(key: key);
@override
State<NetworkButton> createState() => _NetworkButtonState();
}
class _NetworkButtonState extends State<NetworkButton> with TickerProviderStateMixin {
bool _visible = true;
final EdgeInsetsGeometry _edgeInsets = const EdgeInsets.fromLTRB(16.0, 4.0, 16.0, 4.0);
@override
void initState() {
super.initState();
}
_onTap() async {
//change opacity on press
setState(() {
_visible = !_visible;
});
//carry out action after a small delay to make effect work
Future.delayed(Duration(milliseconds: widget.delayMls ?? 200), () {
widget.onTap!();
_visible = true;
});
}
@override
Widget build(BuildContext context) {
return AnimatedOpacity(
opacity: _visible ? 1.0 : 0.75,
duration: const Duration(milliseconds: 500),
child: _visible
? Material(
color: widget.backgroundColor ?? Colors.green,
borderRadius: CBorderRadius.circular(12.0),
child: InkWell(
highlightColor: widget.splashColor ?? Colors.blue,
splashColor: widget.splashColor ?? Colors.blue,
borderRadius: CBorderRadius.circular(12.0),
onTap: _onTap,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(widget.iconData, color: Colors.blue),
const SizedBox(width: 8),
Text(
widget.text!,
style: widget.textStyle ?? TextStyle(color: Colors.blue),
),
],
),
),
)
: Transform.scale(
scale: 0.5,
child: CircularProgressIndicator(
color: Colors.blue,
),
),
);
}
}
CircleAvatar(
backgroundColor: Colors.red,
radius: 75,
child: TextButton(
child: const Center(child: Text('Button')),
onPressed: () {},
),
),SizedBox(
width: 240,
child: TextButton(
child: const Text('Rounded Text Button'),
style: ButtonStyle(
padding: MaterialStateProperty.all<EdgeInsets>(const EdgeInsets.all(16.0)),
foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(RoundedRectangleBorder(borderRadius: BorderRadius.circular(18.0), side: const BorderSide(color: Colors.blue)))),
onPressed: () {}),
),Class & Object
class Task {
String title = '';
String description = '';
Task(this.title, this.description) {
}
}class Square extends Shape {
final double radius;
Square(super.description, this.double);
}class StockPicking {
int? id;
String? name;
String? origin;
double? price;
StockPicking({this.id, this.name, this.origin, this.price});
String get stateValue {
Map<String, String> values = {
"draft": "Draft",
"cancel": "Cancelled",
"waiting": "Waiting Another Operation",
"confirmed": "Waiting Availability",
"partially_available": "Partially Available",
"available": "Available",
"allocated": "Lot Allocated",
"assigned": "Ready for Transfer",
"done": "Transferred"
};
return values.containsKey(state!) ? values[state!].toString() : state!;
}
bool get isAllocated {
return state! == 'allocated';
}
set exchangedPrice(double rate){
price = price*rate;
}
}
Container
Container(
padding: const EdgeInsets.all(20),
child: const Text("Padding all"),
color: Colors.blue),
Container(
padding: const EdgeInsets.only(top: 30),
child: const Text("Padding only"),
color: Colors.green),
Container(
padding: const EdgeInsets.fromLTRB(30, 5, 30, 5),
child: const Text("Padding fromLTRB"),
color: Colors.red),
Container(
color: Colors.pink, //added Container outside to show background color
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: const Text("Padding widget"), color: Colors.pinkAccent),
),
),Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
bottomLeft: Radius.circular(12),
bottomRight: Radius.circular(12),
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 2,
blurRadius: 9,
offset: const Offset(0, 5),
),
],
),
),class GlassContainer extends StatelessWidget {
final double? height;
final double? width;
final Widget? child;
const GlassContainer({Key? key, this.child, this.height, this.width}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(boxShadow: [
BoxShadow(
blurRadius: 8,
spreadRadius: 8,
color: Colors.black.withOpacity(0.05),
)
]),
child: ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 20.0,
sigmaY: 20.0,
),
child: Container(
width: width ?? 360,
height: height ?? 200,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(16.0),
border: Border.all(
width: 1.5,
color: Colors.white.withOpacity(0.2),
)),
child: child!,
),
),
),
);
}
}Container(
color: Colors.pink,
constraints: BoxConstraints(
minHeight: 100, minWidth: double.infinity),
child: ListView(
shrinkWrap: true,
children: [
...List.generate(
5,
(index) => Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Text: ${index}'
),
),
),
],
),
)Customization
MaterialApp(
theme: ThemeData(
textTheme: TextTheme(
caption: TextStyle(
fontSize: 14.0
),
bodyText1: TextStyle(
fontSize: 16.0
),
),
),
);Database
final prefs = await SharedPreferences.getInstance();
List<String> saveData = [];
for(Car car in _cars){
saveData.add(jsonEncode(car.toJson()));
}
prefs.setStringList('cars_pref', saveData);Device
var deviceData = <String, dynamic>{};
try {
if (kIsWeb) {
deviceData = _readWebBrowserInfo(await deviceInfoPlugin.webBrowserInfo);
} else {
if (Platform.isAndroid) {
deviceData =
_readAndroidBuildData(await deviceInfoPlugin.androidInfo);
} else if (Platform.isIOS) {
deviceData = _readIosDeviceInfo(await deviceInfoPlugin.iosInfo);
} else if (Platform.isLinux) {
deviceData = _readLinuxDeviceInfo(await deviceInfoPlugin.linuxInfo);
} else if (Platform.isMacOS) {
deviceData = _readMacOsDeviceInfo(await deviceInfoPlugin.macOsInfo);
} else if (Platform.isWindows) {
deviceData =
_readWindowsDeviceInfo(await deviceInfoPlugin.windowsInfo);
}
}
} on PlatformException {
deviceData = <String, dynamic>{
'Error:': 'Failed to get platform version.'
};
}Dialog & Popup
String _chosenValue = "Dart";
final List<String> _choices = ['Dart', 'Kotlin', 'TypeScript', 'Go', 'Java', 'C'];
_showDialog() {
showDialog(
context: context,
builder: (BuildContext context) {
return StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return AlertDialog(
title: const Text("Favorite Language"),
content: Column(mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [
const Text("Please select your favorite language."),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DropdownButton<String>(
hint: const Text('Select one language'),
value: _chosenValue,
underline: Container(),
items: _choices.map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: const TextStyle(fontWeight: FontWeight.bold),
),
);
}).toList(),
onChanged: (String? value) {
setState(() {
_chosenValue = value!;
});
},
)),
]),
actions: <Widget>[
OutlinedButton(
child: const Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
},
);
}//create dialog
AlertDialog alert = AlertDialog(
title: Text("Confirmation"),
content: Text("Make your decision"),
actions: [
TextButton(
child: Text("Cancel"),
onPressed: () {},
),
TextButton(
child: Text("Confirm"),
onPressed: () {},
)
],
);
// show the dialog
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);Encryption
import 'package:flutter_secure_storage/flutter_secure_storage.dart'; final storage = new FlutterSecureStorage(); //save password String password = "@#43nasASDOLC"; await storage.write(key: "password", value: password ); //read password String pass = await storage.read(key: "password");
Enumeration
enum Direction { north, south, east, west }
var direction = Direction.south;
switch (direction) {
case Direction.north:
print("You are going North!");
break;
case Direction.south:
print("You are going South!");
break;
case Direction.east:
print("You are going East!");
break;
case Direction.west:
print("You are going West!");
break;
}File
//read text file in assets folder
Future<String> loadEmojiString(String fileName) async {
return await rootBundle.loadString('assets/$fileName.txt');
}
//append data to the end of a text file
write(String content) async {
final directory = await getApplicationDocumentsDirectory();
final File file = File('${directory.path}/somefile.txt');
await file.writeAsString(content, mode: FileMode.append);
}
//write/override data to a text file
write(String content) async {
final directory = await getApplicationDocumentsDirectory();
final File file = File('${directory.path}/somefile.txt');
await file.writeAsString(content);
}Function
//define a notification
class ScanResultChanged extends Notification {
final bool correct;
final String message;
ScanResultChanged(this.correct, this.message);
}
//call it in an event
onPressed:(){
ScanResultChanged(true, "Scanned completed").dispatch(context);
}
//wrap the parent widget with NotificationListener<ScanResultChanged>
NotificationListener<ScanResultChanged>(
onNotification: (n) {
setState(() {
_scanCorrect = n.correct;
_scanMessage = n.message;
});
return true;
},
child: Container(
width: MediaQuery.of(context).size.width,
constraints: const BoxConstraints(minHeight: 36),
padding: const EdgeInsets.all(MyTheme.padding),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if(_scanCorrect)
Text(_scanMessage)
],
),
),
)extension MyCustomList<T> on List<T> {
int get slotAvailable => 1000 - length;
List<T> operator -() => reversed.toList();
List<List<T>> halve() => [sublist(0, (length/2).round()), sublist((length/2).round())];
}extension NumberFormat on String {
int toInt() {
return int.parse(this);
}
}class ListCard extends StatefulWidget {
final List<Widget>? children;
final VoidCallback? onTap;
final Color? cardColor;
const ListCard({Key? key, this.children, this.onTap, this.cardColor}) : super(key: key);
@override
State<ListCard> createState() => _ListCardState();
}
class _ListCardState extends State<ListCard> {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: MyTheme.paddingTop),
child: RippleEffect(
onTap: widget.onTap,
child: Container(
padding: const EdgeInsets.all(MyTheme.padding),
decoration: BoxDecoration(
color: widget.cardColor ?? MyTheme.cardColor,
border: Border.all(
color: widget.cardColor ?? MyTheme.cardColor,
),
borderRadius: MyTheme.radius),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: widget.children!,
)),
),
);
}
}Icon
dev_dependencies:
flutter_test:
sdk: flutter
flutter_launcher_icons: ^0.9.2
flutter_icons:
android: true
ios: true
image_path: "assets/icon/my_custom_launcher.png"class CounterIcon extends StatelessWidget {
final Icon? icon;
final int? counter;
const CounterIcon({Key? key, this.icon, this.counter}) : super(key: key);
@override
Widget build(BuildContext context) {
return Stack(children: <Widget>[
icon!,
Positioned(
right: 0,
child: Container(
padding: const EdgeInsets.all(1),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(6),
),
constraints: const BoxConstraints(
minWidth: 16,
minHeight: 16,
),
child: Text(
'$counter',
style: const TextStyle(
color: Colors.white,
fontSize: 10,
),
textAlign: TextAlign.center,
),
),
)
]);
}
}Image
ColorFiltered( colorFilter: const ColorFilter.mode( Colors.grey, BlendMode.saturation, ), child: FadeInImage.assetNetwork( image: "https://cdn.pixabay.com/photo/2022/04/06/20/29/airplane-7116299_960_720.jpg", placeholder: "https://cdn.pixabay.com/photo/2022/04/06/20/29/airplane-7116299_960_720.jpg", ), )
CircleAvatar(
backgroundImage: Image.network("https://cdn.pixabay.com/photo/2022/04/18/19/51/rocks-7141482_960_720.jpg").image,
backgroundColor: Colors.transparent,
radius: 100,
)CircleAvatar(
backgroundImage: NetworkImage('https://cdn.pixabay.com/photo/2022/04/18/16/16/ship-7140939_960_720.jpg'),
radius: 200
)class BezierCurveClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var waveHeight = 10;
Path path = new Path();
final lowPoint = size.height - waveHeight;
final highPoint = size.height - waveHeight*2;
path.lineTo(0, size.height);
path.quadraticBezierTo(
size.width / 4, highPoint, size.width / 2, lowPoint);
path.quadraticBezierTo(
3 / 4 * size.width, size.height, size.width, lowPoint);
path.lineTo(size.width, 0);
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}Container(
decoration:
BoxDecoration(color: Colors.red, shape: BoxShape.circle),
height: 300,
width: 300,
child: ClipOval(
child: Image.network(
"https://cdn.pixabay.com/photo/2017/03/01/05/13/table-setting-2107600_960_720.jpg", fit: BoxFit.fitHeight,),
),
)Uint8List _image = Base64Decoder().convert(imageString); Image.memory(_image);
Keyboard
FocusScope.of(context).requestFocus(new FocusNode()); //or FocusScopeNode currentFocus = FocusScope.of(context); FocusManager.instance.primaryFocus.unfocus();
Layout
Scaffold(
backgroundColor: Colors.blue,
body: Center(
child: FlutterLogo(
size: 200,
),
),
)import 'package:anime_timer/constant/theme.dart';
import 'package:anime_timer/ui/common/appbar.dart';
import 'package:flutter/material.dart';
class MyScaffold extends StatelessWidget {
final Widget? child;
final List<Widget>? action;
final Widget? floatingActionButton;
const MyScaffold({Key? key, this.child, this.action, this.floatingActionButton}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.orangeAccent, Colors.deepOrange],
)),
child: Scaffold(
appBar: MainAppBar(action: action ?? []),
body: SafeArea(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: SizedBox(
width: MediaQuery.of(context).size.width,
child: child!,
),
),
),
),
floatingActionButton: floatingActionButton,
),
);
}
}
import 'package:flutter/material.dart';
class ResponsiveLayout extends StatelessWidget {
final Widget? mobileLayout;
final Widget? desktopLayout;
final double breakPoint = 640.0;
const ResponsiveLayout({Key? key, this.mobileLayout, required this.desktopLayout}) : super(key: key);
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth >= breakPoint) {
return desktopLayout!;
} else {
return mobileLayout != null ? mobileLayout! : desktopLayout!;
}
},
);
}
}class WaveShape extends CustomClipper<Path> {
@override
getClip(Size size) {
double height = size.height;
double width = size.width;
var p = Path();
p.lineTo(0, 0);
p.cubicTo(width * 1 / 2, 0, width * 2 / 4, height, width, height);
p.lineTo(width, 0);
p.close();
return p;
}
@override
bool shouldReclip(CustomClipper oldClipper) => true;
}
class BottomWaveShape extends CustomClipper<Path> {
@override
getClip(Size size) {
double height = size.height;
double width = size.width;
var p = Path();
p.lineTo(0, 0);
p.cubicTo(width * 1 / 2, 0, width * 2 / 4, height, width, height);
p.lineTo(0, height);
p.close();
return p;
}
@override
bool shouldReclip(CustomClipper oldClipper) => true;
}//view detail link for full source code
@override
Widget build(BuildContext context) {
return Stack(
fit: StackFit.expand,
children: [
_video(context),
_top(),
_bottom(),
_right(context),
],
);
}class ChatBox extends StatefulWidget {
@override
_ChatBoxState createState() => _ChatBoxState();
}
class _ChatBoxState extends State<ChatBox> {
@override
Widget build(BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height - 150,
padding: EdgeInsets.fromLTRB(36.0, 16.0, 36.0, 16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Avatar(),
SizedBox(width: 8.0),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Name, 8:30PM',
style: TextStyle(color: Theme.secondaryTextColor),
),
Container(
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(8.0)),
child: Text('Hello\nMy test message')),
],
),
],
),
SizedBox(height: 16.0),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.grey.shade200,
borderRadius: BorderRadius.circular(8.0)),
child: Text('Hello')),
],
),
],
),
);
}
}List
FutureBuilder<List<StockMove>?>(
future: _futureStockMoves,
builder: (ctx, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasError) {
return const ErrorText();
} else if (snapshot.hasData) {
final moves = snapshot.data as List<StockMove>;
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if(widget.picking!.picker_release!)
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
TextButton(onPressed: (){
setState(() {
});
}, child: const Text("Press Me", style:TextStyle(color: MyTheme.highlightColor),))
],),
if (moves.isNotEmpty)
...moves
.map((item) => Text(item.name))
else
const Text('No product')
],
);
}
}
// Displaying LoadingSpinner to indicate waiting state
return CenterProgressIndicator();
}
)Menu & Navigation
class WaveClip extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = new Path();
final lowPoint = size.height - 30;
final highPoint = size.height - 60;
path.lineTo(0, size.height);
path.quadraticBezierTo(
size.width / 4, highPoint, size.width / 2, lowPoint);
path.quadraticBezierTo(
3 / 4 * size.width, size.height, size.width, lowPoint);
path.lineTo(size.width, 0);
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}import 'package:flutter/material.dart';
class StackPage extends StatefulWidget {
@override
_StackPageState createState() => _StackPageState();
}
class _StackPageState extends State<StackPage>
with SingleTickerProviderStateMixin {
AnimationController _controller;
@override
void initState() {
_controller =
AnimationController(vsync: this, duration: Duration(milliseconds: 500));
super.initState();
}
void _toggle() {
setState(() {
_controller.isDismissed ? _controller.forward() : _controller.reverse();
});
}
FlatButton _menuItem(IconData icon, String text, VoidCallback onPressed){
return FlatButton(onPressed: onPressed, child: Row(
children: [
Icon(icon, color: Colors.white,),
SizedBox(width: 8,),
Text(text, style: TextStyle(color: Colors.white),)
],
));
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget child) {
double slide = 50 * _controller.value;
double scale = 1 - (_controller.value * 0.5);
return Stack(
children: [
Container(
width: double.infinity,
color: Colors.lightBlueAccent,
child: Padding(
padding: const EdgeInsets.only(
top: 50.0, left: 16.0, right: 16.0, bottom: 16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Navigation',
style: Theme.of(context).textTheme.headline6,
),
_menuItem(Icons.home, 'Home', (){}),
_menuItem(Icons.pages, 'Page 1', (){}),
_menuItem(Icons.palette, 'Page 2', (){}),
_menuItem(Icons.close, 'Close Menu', () => _toggle()),
],
),
flex: 5,
),
Expanded(
child: Container(),
flex: 5,
)
],
),
),
),
Transform(
transform: Matrix4.identity()
..translate(slide)
..scale(scale),
alignment: Alignment.centerRight,
child: Scaffold(
appBar: AppBar(
title: Text('Example'),
actions: [
IconButton(
icon: Icon(Icons.dehaze),
onPressed: () {
_toggle();
},
)
],
),
body: Center(
child: Text('Main page'),
),
),
),
],
);
},
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}@override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
children: [
Padding(
padding: EdgeInsets.all(16.0),
child: Text('Gmail',
style: TextStyle(fontSize: 24, color: Colors.redAccent)),
),
Divider(color: Colors.grey),
_tile(Icons.all_inbox, 'All inboxes', -1, () {
setState(() {
_selectedLabel = 'All inboxes';
});
}),
Divider(
color: Colors.grey,
indent: 70.0,
),
_tile(Icons.inbox, 'Primary', 5, () {}),
_tile(Icons.group, 'Social', -1, () {}),
_tile(Icons.label, 'Promotions', -1, () {}),
Divider(
color: Colors.grey,
indent: 70.0,
),
_tile(Icons.star_border_outlined, 'Starred', 15, () {}),
_tile(Icons.schedule, 'Snoozed', -1, () {}),
_tile(Icons.label_important_outline_sharp, 'Important', 100, () {
setState(() {
_selectedLabel = 'Important';
});
}),
_tile(Icons.send_outlined, 'Sent', -1, () {}),
_tile(Icons.schedule_send, 'Scheduled', -1, () {}),
_tile(Icons.insert_drive_file_outlined, 'Draft', -1, () {}),
_tile(Icons.mail, 'All mail', -1, () {}),
_tile(Icons.report_gmailerrorred_outlined, 'Spam', -1, () {
setState(() {
_selectedLabel = 'Spam';
});
}),
_tile(Icons.restore_from_trash_outlined, 'Trash', -1, () {}),
Divider(
color: Colors.grey,
indent: 70.0,
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text('LABELS'),
),
_tile(Icons.label_outline, '[Imap]/Sent', -1, () {}),
_tile(Icons.label_outline, '[Imap]/Trash', -1, () {}),
_tile(Icons.label_outline, 'Work', -1, () {}),
Divider(
color: Colors.grey,
indent: 70.0,
),
_tile(Icons.add, 'Create New', -1, () {}),
Divider(
color: Colors.grey,
indent: 70.0,
),
_tile(Icons.settings_outlined, 'Settigs', -1, () {}),
_tile(Icons.feedback_outlined, 'Send Feedback', -1, () {}),
_tile(Icons.help_outline, 'Help', -1, () {}),
],
),
);
}bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 8.0,
clipBehavior: Clip.antiAlias,
child: Container(
height: kBottomNavigationBarHeight,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border(
top: BorderSide(
color: Colors.grey,
width: 0.5,
),
),
),
child: BottomNavigationBar(
currentIndex: _currentIndex,
backgroundColor: Colors.blue,
selectedItemColor: Colors.white,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.category), label: 'Category'),
BottomNavigationBarItem(icon: Icon(Icons.home), label: ''),
BottomNavigationBarItem(
icon: Icon(Icons.settings_outlined), label: 'Setting')
]),
),
),
)class RoundAppBar extends StatelessWidget with PreferredSizeWidget{
final double barHeight = 50;
final String title;
RoundAppBar({Key key, this.title}) : super(key: key);
@override
Size get preferredSize => Size.fromHeight(kToolbarHeight + barHeight);
@override
Widget build(BuildContext context) {
return AppBar(
title: Center(child: Text(title)),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(48.0),
),
),
actions: [
Icon(Icons.dehaze)
],
);
}
}class MainAppBar extends StatelessWidget implements PreferredSizeWidget {
final double barHeight = 20.0;
const MainAppBar({Key? key}) : super(key: key);
@override
Size get preferredSize => Size.fromHeight(kToolbarHeight + barHeight);
@override
Widget build(BuildContext context) {
return AppBar(
backgroundColor: Colors.green,
elevation: 0,
centerTitle: true,
leading: ModalRoute.of(context)!.canPop ?
IconButton(
icon: const Icon(
Icons.arrow_back,
color: Colors.white,
),
onPressed: () =>
Navigator.of(context).pop(),
) : null,
title: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Text('App Title')
],
),
);
}
}
//close a screen with a message, previous page can check this message to know what happened on the 2nd screen. Navigator.pop(context, 'any success message here')
DropdownButton<String>(
value: _selectedValue,
isExpanded: true,
items: [
DropdownMenuItem<String>(
value: "jaav",
child: Text(
"Java",
style: TextStyle(color: Colors.red),
),
),
DropdownMenuItem<String>(
value: "kotlin",
child: Text(
"Kotlin",
style: TextStyle(color: Colors.blue),
),
),
],
onChanged: (value) {
setState(() {
_selectedValue = value;
});
},
hint: Text(
"Category",
),
)Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (BuildContext context) => super.widget),
);Network
class OdooClient {
String? url;
String? db;
String? username;
String? pass;
int? uid;
OdooClient(this.url, this.db, this.username, this.pass, this.uid);
OdooClient.withUser(User user) {
uid = user.id;
url = user.url;
db = user.database;
username = user.username;
pass = user.password;
}
Future<OdooResponse> fetchData(String table, List<dynamic> args, Map<String, Object> params) async {
//default params
if(!params.containsKey("offset")){
params["offset"] = 0;
}
if(!params.containsKey("limit")){
params["limit"] = 100;
}
OdooResponse response = OdooResponse.empty();
await searchRead(table, [args], params).then((items) async {
for (var i = 0; i < items.length; i++) {
response.jsonData!.add(items[i]);
}
response.success = ResponseStatus.success;
}).onError((error, stackTrace) {
response.success = ResponseStatus.failed;
response.message = error.toString();
});
return response;
}
/*Base*/
String? get formattedBaseURL {
String fUrl = url!;
if (!fUrl.endsWith('/')) {
fUrl = fUrl + '/';
}
return fUrl;
}
Uri get commonURL {
return Uri.parse(formattedBaseURL! + 'xmlrpc/2/common');
}
Uri get objectURL {
return Uri.parse(formattedBaseURL! + 'xmlrpc/2/object');
}
Future<List<dynamic>> search(String model, List<dynamic> args) async {
return await xml_rpc.call(objectURL, 'execute_kw', [db, uid, pass, model, 'search', args]);
}
Future<List<dynamic>> searchRead(String model, List<dynamic> args, Map<String, Object> params) async {
return await xml_rpc.call(objectURL, 'execute_kw', [db, uid, pass, model, 'search_read', args, params]);
}
Future<dynamic> create(String model, List<dynamic> params) async {
return await xml_rpc.call(objectURL, 'execute_kw', [db, uid, pass, model, 'create', params]);
}
Future<dynamic> write(String model, List<dynamic> params) async {
return await xml_rpc.call(objectURL, 'execute_kw', [db, uid, pass, model, 'write', params]);
}
Future<dynamic> action(String model, String action, List<dynamic> params) async {
return await xml_rpc.call(objectURL, 'execute_kw', [db, uid, pass, model, action, params]);
}
Future<dynamic> authenticate() async {
return await xml_rpc.call(commonURL, 'authenticate', [db, username, pass, '']);
}
Future<dynamic> getFields(String model) async {
//Map<String, List<dynamic>> params = {'attributes': ['string', 'help', 'type']};
Map<String, List<dynamic>> params = {
'attributes': ['string']
};
return await xml_rpc.call(objectURL, 'execute_kw', [db, uid, pass, model, 'fields_get', [], params]);
}
}_extractURLs() async {
if (_controller.text != '') {
List<String> urls = URLHelper.textToLines(_controller.text);
for (var url in urls) {
if (Uri.tryParse(url)!.hasAbsolutePath) {
final webScraper = WebScraper(URLHelper.domain(url));
if (await webScraper.loadWebPage(URLHelper.page(url))) {
List<Map<String, dynamic>> elements = webScraper.getElement('h3', []);
for (var e in elements) {
_result.add(e['title'].trim());
}
setState(() {});
}
}
}
}
}Number
String str = "182000000 and 2670000. That’s how many seconds I’ve spent thinking."; String? numStr = RegExp(r"\d+").firstMatch(str)!.group(0); int num = int.parse(numStr!); print(num); // 182000000 String numbers = "56.20 kg"; double? d = double.tryParse(numbers.replaceAll(RegExp(r'[^0-9\.]'), '')); print(d); //56.2
Operating System
import 'package:flutter/foundation.dart' show kIsWeb;
import 'dart:io' show Platform;
if (kIsWeb) {
print("This is a website");
}
if (Platform.isAndroid) {
} else if (Platform.isIOS) {
} else if (Platform.isFuchsia) {
} else if (Platform.isWindows) {
} else if (Platform.isMacOS) {
} else if (Platform.isLinux) {
}Progress Indicator
//view detail snippet to view FlyingDot class
class TwoFlyingDots extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(children: [
FlyingDot(color: Colors.blue),
FlyingDot(color: Colors.red, reverse: true)
]);
}
}Text
const SelectableText( 'You can select this text', ), const SelectableText( 'On highlight, the cursor appears to be bigger than normal', cursorColor: Colors.red, cursorWidth: 24, cursorHeight: 24, style: TextStyle(fontWeight: FontWeight.bold), ),
class TipField extends StatefulWidget {
const TipField({Key? key}) : super(key: key);
@override
State<TipField> createState() => _TipFieldState();
}
class _TipFieldState extends State<TipField> {
final TextEditingController _controller = TextEditingController();
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Row(
children: [
Flexible(
flex: 6,
child: TextField(
controller: _controller,
onChanged: (value) {
AmountChanged(double.tryParse(value) ?? 0).dispatch(context);
},
keyboardType: const TextInputType.numberWithOptions(decimal: true, signed: false),
decoration: InputDecoration(
label: const Text("Tip"),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12.0),
),
filled: true,
fillColor: Colors.white,
),
),
),
Flexible(
flex: 2,
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: OutlinedButton(
onPressed: () {
double amount = double.tryParse(_controller.text) ?? 0;
amount = amount == 0 ? 0 : amount - 1;
_controller.text = amount.toString();
},
child: const SizedBox(height: 46, child: Center(child: Text("-"))),
),
),
),
Flexible(
flex: 2,
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: OutlinedButton(
onPressed: () {
double amount = double.tryParse(_controller.text) ?? 0;
_controller.text = (amount + 1).toString();
},
child: const SizedBox(height: 46, child: Center(child: Text("+"))),
),
),
),
],
);
}
}TextField(
controller: _controller,
minLines: 3,
maxLines: 5,
),Autocomplete<String>(
optionsBuilder: (TextEditingValue textEditingValue) {
if (textEditingValue.text == '') {
return List<String>.empty();
}
return _options.where((String option) {
return option.toLowerCase().contains(textEditingValue.text.toLowerCase());
});
},
onSelected: (String selection) {
debugPrint('Selected: $selection');
},
)
class RoundedTextField extends StatelessWidget {
final String? hintText;
final IconData? icon;
final Color? color;
final Color? backgroundColor;
final ValueChanged<String>? onChanged;
final TextEditingController? controller;
const RoundedTextField(
{Key? key,
this.hintText,
this.icon,
this.onChanged,
this.color = Colors.white,
this.backgroundColor = Colors.blueAccent,
this.controller})
: super(key: key);
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
decoration: BoxDecoration(
color: backgroundColor,
borderRadius: BorderRadius.circular(36),
),
child: TextField(
controller: controller,
onChanged: onChanged,
cursorColor: color,
decoration: InputDecoration(
icon: Icon(
icon,
color: color,
),
hintText: hintText,
hintStyle: TextStyle(color: color),
border: InputBorder.none,
),
),
);
}
}//The default font size is 14 logical pixels.
MaterialApp(
theme: ThemeData(
textTheme: const TextTheme(
bodyText1: TextStyle(fontSize: 18.0),
bodyText2: TextStyle(fontSize: 20.0),
button: TextStyle(fontSize: 16.0),
),
),
home: Scaffold(
body: Center(child: Text("Font size is 18")),
),
)Theme
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.orange,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Text("First Line"),
const Text("Second Line"),
],
),
),
),
);
}
}Timer
Future.delayed(Duration(milliseconds: 500), () {
print("Call a method after 0.5 seconds");
});
Timer(Duration(seconds: 10), () {
print("This line is called after 10 seconds");
});class CountDownTimeWidget extends StatefulWidget {
final int? endTime;
const CountDownTimeWidget({Key? key, required this.endTime}) : super(key: key);
@override
State<CountDownTimeWidget> createState() => _CountDownTimeWidgetState();
}
class _CountDownTimeWidgetState extends State<CountDownTimeWidget> {
@override
Widget build(BuildContext context) {
return CountdownTimer(
endTime: widget.endTime!,
widgetBuilder: (_, CurrentRemainingTime? time) {
if (time == null) {
return Container();
}
return Text("${time.hours.toString().padLeft(2, "0")}:${time.min.toString().padLeft(2, "0")}:${time.sec.toString().padLeft(2, "0")}",
style: const TextStyle(
fontSize: 18,
));
},
);
}
}final Duration period = Duration(seconds: 5);
Timer.periodic(period, (Timer timer) {
print('The 5 minutes come.');
//cancel the timer if a condition met
if(condition){
timer.cancel();
}
});Troubleshoot
- First, try uninstalling any previous versions of the app from the device. - Check if your device is out of storage. - Allow "Install App from Unknown Sources"
//?. List<int>? numberList = null; print(numberList?.length); //null List<int>? numberList = [1243, 34521, 943765]; print(numberList?.length); //3 //?? String? productName; print(productName ?? 'Phone'); //Phone String? productName = "Crystal Ring"; print(productName ?? 'Phone'); //Crystal Ring //??= String? brand; brand ??= 'Samsung'; print(brand); //Samsung //...? List<int>? brands; print([...?brands, 'Apple']); //Apple
flutter upgrade --force //or git add -A git reset --hard
if (mounted) {
setState (() => _sales = []);
}@override
void initState() {
super.initState();
WidgetsBinding.instance!.addPostFrameCallback((_) {
_fetchPicking();
});
}UI
SizedBox(
height: 300.0,
child: SingleChildScrollView(
child: Wrap(
children: [
],
),
),
)Ribbon(
title: '',
titleStyle: const TextStyle(color: Colors.white, fontSize: 12),
color: Colors.purple,
location: RibbonLocation.topStart,
farLength: 15,
nearLength: 0,
child: TextButton(
onPressed: () {
},
child: Text("${index + 1}"),
),
)Variable
var data = ["Good morning", 13354, 7.223344, [], {}, Product('Metal Ring', 300.00)];
if (data[0] is String) print(data[0]);
if (data[1] is int) print(data[1]);
if (data[2] is! int) print(data[2]);
if (data[3] is List) print('List');
if (data[4] is Object) print('Object');
if (data[5] is Product) print(data[5].toString());
if (data[1].runtimeType == int) print('Int');
if (data[3].runtimeType == [].runtimeType) print('List');Web
SystemChrome.setApplicationSwitcherDescription(ApplicationSwitcherDescription(
label: article.title,
primaryColor: Theme.of(context).primaryColor.value,
));What is Dart and Flutter?
Flutter is an open-source mobile application development framework created by Google. It is used to develop applications for Android and iOS. Flutter uses the Dart programming language. Dart is a single-threaded programming language. This means that all operations are carried out in sequence. So, if you want to run two operations at the same time, you would have to use separate threads.
Flutter has several features that make it unique and attractive for mobile app development. One of these is its responsive design feature which allows you to design your user interface according to the screen size and orientation of the device. This means that your app will look great on all devices, whether it’s a phone or a tablet.
Another feature of Flutter is its hot reload feature. This allows you to quickly and easily reload your code changes without having to restart the app or recompile the code. This makes development faster and easier.
Finally, Flutter comes with a set of pre-built widgets that can be used to develop beautiful and user-friendly apps.
Why New Flutter Developers Should Read Flutter Code Examples?
There are several reasons why every new Flutter developer should read code examples.
- It helps you learn the Dart programming language. As we mentioned earlier, Flutter uses the Dart programming language. So, by reading code examples, you will learn how to use Dart to build Flutter apps.
- It helps you understand how to use the various features of Flutter. By reading code examples, you will learn how to use the hot reload feature, how to design responsive user interfaces, and how to use the pre-built widgets.
- Code examples help you understand best practices for coding in Flutter. By reading code examples written by experienced developers, you will learn how to code in a way that is efficient and effective.
