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

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
@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.

Leave a Comment

Your email address will not be published.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close