Dart & Flutter Codes: Examples and Snippets

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!

Curated List of Dart & Flutter Code Examples and Snippets

Animation

Add Wave Animation —

WaveContainer(
width: double.infinity,
height: 50,
waveColor: Colors.orangeAccent)

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']

Check If 2 Lists are Equal —

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

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);
  }
})

Assets

Add Assets Automatically —

asset_manager add
asset_manager update

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"),
                      ),
                    ),
                  )

Change Border's Color, Radius, Width of OutlinedButton —

OutlinedButton(
    style: OutlinedButton.styleFrom(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16.0),
      ),
      side: const BorderSide(width: 2, color: Colors.green),
    ),
    onPressed: () {},
    child: Text('OutlinedButton'),
),

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,
              ),
            ),
    );
  }
}

Circular Button —

CircleAvatar(
    backgroundColor: Colors.red,
    radius: 75,
    child: TextButton(
      child: const Center(child: Text('Button')),
      onPressed: () {},
    ),
  ),

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

Initialize Variables in Constructor Body —

class Task {
    String title = '';
    String description = '';

    Task(this.title, this.description) {

    }
}

Use the Super Argument —

class Square extends Shape {
    final double radius;
    Square(super.description, this.double);
}

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

Change Font Size of the Whole App —

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      caption: TextStyle(
        fontSize: 14.0
      ),
      bodyText1: TextStyle(
          fontSize: 16.0
      ),
    ),
  ),
);

Database

Save a List of Objects in Shared Preferences —

final prefs = await SharedPreferences.getInstance();
List<String> saveData = [];
for(Car car in _cars){
  saveData.add(jsonEncode(car.toJson()));
}
prefs.setStringList('cars_pref', saveData);

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)
    ],
  ),
),
)

Create Genetic Extension —

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())];
}

Create Extension Methods —

extension NumberFormat on String {
  int toInt() {
    return int.parse(this);
  }
}

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

Add Launcher 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"

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",
	),
)

The argument type 'ImageNetwork' can't be assigned to the parameter type 'ImageProvider<Object>?' —

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,
 )

Set CircleAvatar Size —

CircleAvatar(
    backgroundImage: NetworkImage('https://cdn.pixabay.com/photo/2022/04/18/16/16/ship-7140939_960_720.jpg'),
    radius: 200
)

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;
}

Create a Circular Image —

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,),
  ),
)

Convert BASE64 String into Image —

Uint8List _image = Base64Decoder().convert(imageString);
Image.memory(_image);

Keyboard

Hide Soft Keyboard —

FocusScope.of(context).requestFocus(new FocusNode());
//or
FocusScopeNode currentFocus = FocusScope.of(context);
FocusManager.instance.primaryFocus.unfocus();

Layout

Set Widget Center at Middle of Screen —

Scaffold(
  backgroundColor: Colors.blue,
  body: Center(
    child: FlutterLogo(
      size: 200,
    ),
  ),
)

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;
}

Tik Tok-like Video Player —

//view detail link for full source code
@override
  Widget build(BuildContext context) {
    return Stack(
      fit: StackFit.expand,
      children: [
        _video(context),
        _top(),
        _bottom(),
        _right(context),
      ],
    );
  }

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')
        ],
      ),
    );
  }
}

Pass Data To Previous Screen —

//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')

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",
  ),
)

Refresh Currently Active Page —

Navigator.pushReplacement(
            context,
            MaterialPageRoute(builder: (BuildContext context) => super.widget),
          );

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

Progress Indicator with Animation —

//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

Display Selectable 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),
),

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 Multiline TextField —

TextField(
    controller: _controller,
    minLines: 3,
    maxLines: 5,
),

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

Execute a Function After Delay —

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");
});

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,
            ));
      },
    );
  }
}

Call a Function Repeatedly —

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

Disable Web and Desktop Support —

flutter config --no-enable-web
flutter config --no-enable-macos-desktop 
flutter config --no-enable-windows-desktop 
flutter config --no-enable-linux-desktop

Fix "App Not Installed" —

- 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"

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

Fix flutter upgrade Command Failed —

flutter upgrade --force
//or
git add -A
git reset --hard

Fix Unhandled Exception: This widget has been unmounted, so the State no longer has a context —

if (mounted) { 
  setState (() => _sales = []);
}

Fix setState() or markNeedsBuild() called during build —

@override
  void initState() {
    super.initState();
    WidgetsBinding.instance!.addPostFrameCallback((_) {
      _fetchPicking();
    });
  }

UI

Make Wrap Widget Scrollable —

SizedBox(
  height: 300.0,
  child: SingleChildScrollView(
    child: Wrap(
      children: [
      ],
    ),
  ),
)

Add a Ribbon Decoration —

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

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');

Web

Change Page Title Dynamically —

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.