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
Array & List
Remove Empty or false Values from a 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']
Iterate Through a Map —
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); }
Use await Inside A Loop —
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
Button with Gradient Borders —
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"), ), ), )
Add a Loading Indicator Inside a Button After Pressed —
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, ), ), ); } }
Rounded Button —
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
Create Getters and Setters —
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
Add Padding to Container Widget —
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), ), ),
Add Shadow to a Widget —
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), ), ], ), ),
Glassmorphism Card —
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!, ), ), ), ); } }
Set Min Width and Min Height of a Container —
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
Database
Device
Get Device Info —
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
Change Values of Dropdown in Dialog in Flutter —
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 an AlertDialog —
//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
Encrypt and Store Password —
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
Create and Use Enum —
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 and Write a Text 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
Pass Data from Child Widget to Its Parent —
//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) ], ), ), )
Pass a Method as A Parameter —
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
Display Counter Badge above an Icon —
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
Add Grayed Out Effect —
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", ), )
Image with Bezier Curves —
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; }
Keyboard
Layout
Set Gradient Background Color for a Screen —
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, ), ); } }
Responsive Layout —
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!; } }, ); } }
Stack Page with ClipPath Wave —
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; }
Desktop Skype-like Chat Box —
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 with ListView —
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
Wave-shaped AppBar —
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; } }
Animated Stack Menu —
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(); } }
Gmail Sidebar —
@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, () {}), ], ), ); }
Notched Bottom Bar —
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') ]), ), ), )
AppBar with Round Bottom —
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) ], ); } }
Override the Back Button in AppBar —
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') ], ), ); } }
Create a Dropdown —
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", ), )
Network
Connect to Odoo REST API —
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]); } }
Scrape the Web —
_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
Ectract Number from String —
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
Detect Running Platform and Web —
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
Text
Update TextField on Button Click —
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("+"))), ), ), ), ], ); } }
Create an Autocomplete Field —
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'); }, )
Rounded Input TextField without Border —
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, ), ), ); } }
Text’s Default Font Size —
//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
Change Background Color of a Screen —
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
Countdown —
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, )); }, ); } }
Troubleshoot
Null-aware Operator —
//?. 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
UI
Variable
Evaluate a Variable’s Data Type —
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');
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.