A Collection of Flutter and Dart Tips and Tricks

Last update: Aug 13, 2022

Table of Contents

Image Tint in Flutter

Video Demo

Source Code

SlideTransition in Flutter

Video Demo

Source Code

Expansion Panels and Lists in Flutter

Video Demo

Source Code

Complete CRUD App in Flutter

Video Demo

Source Code

SQLite Storage in Flutter

Video Demo

Source Code

Circular Progress with Percentage in Flutter

Video Demo

Source Code

Opening URLs in Flutter

Source Code

Commodore 64 Screen in Flutter

Video Demo

Source Code

Animated Lists in Flutter

Video Demo

Source Code

CheckboxListTile in Flutter

Source Code

- Operator on String in Dart

Source Code

Dart Progress for Future

Source Code

Move Widget Shadows with Animation

Source Code

Gallery with Blurred Backgrounds in Flutter

Source Code

Custom Path Clippers in Flutter

Source Code

Frost Effect on Images in Flutter

Source Code

Custom Clippers in Flutter

Source Code

Check if Website is Up or Down in Dart

Source Code

Section Titles on ListView in Flutter

Source Code

Circular Progress in Flutter

Source Code

Displaying Scroll Wheels in Flutter

Source Code

Post Messages to Slack with Dart

Source Code

Unwrap List ? in Dart

Source Code

Avoiding UI Jitters When Switching Widgets in Flutter

Source Code

Detect Redirects in Dart

Source Code

Proportional Constraints in Flutter

Source Code

Displaying Cupertino Action Sheets in Flutter

Source Code

Rotating List in Dart

Source Code

Displaying SnackBars in Flutter

Source Code

Custom Tab Bar Using ToggleButtons in Flutter

Source Code

Hashable Mixins in Dart

Source Code

Flutter Tips and Tricks in Terminal

Source Code

Searching List > in Dart

Source Code

Cloning Objects in Dart

Source Code

Color Filters in Flutter

Source Code

Flattening Lists in Dart

Source Code

Managing Duplicates in List in Dart

Source Code

FlatMap and CompactMap in Dart

Source Code

Equality of List in Dart

Source Code

Constants in Dart

Source Code

Displaying Scrollable Bottom Sheets in Flutter

Source Code

YouTube Ad Remover in Dart

Source Code

Fade Between Widgets in Flutter

Source Code

Sort Descriptors in Dart

Source Code

User Sortable Columns and Tables in Flutter

Source Code

Content-Length of List in Dart

Source Code

Recursive Dot Notation on Maps in Dart

Source Code

Allow User Selection of Text in Flutter

Source Code

Placing Constraints on Widgets in Flutter

Source Code

Animating Position Changes in Flutter

Source Code

Transitioning Between Widgets in Flutter

Source Code

Doubly Linked Lists in Dart

Source Code

Reordering Items Inside List Views in Flutter

Source Code

Custom Stream Transformers in Dart

Source Code

Expanding Stream Elements in Dart

Source Code

Consume Streams for a Duration in Dart

Source Code

Shortening URLs in Dart

Source Code

LimitedBox Widget as ListView Items in Flutter

Source Code

Generically Convert Anything to Int in Dart

Source Code

Validating URL Certificates in Dart

Source Code

Displaying Popup Menus in Flutter

Source Code

Implementing Drag and Drop in Flutter

Source Code

Dismissing List Items in Flutter

Source Code

Animating Widgets with Ease in Flutter

Source Code

Displaying Tool Tips in Flutter

Source Code

Displaying Assorted Widgets Inside TableView in Flutter

Source Code

Page Indicator with Page View in Flutter

Source Code

Animating and Moving a Floating Action Button in Flutter

Source Code

Fading Network Image Widget in Flutter

Source Code

Transparent Alert Dialogs in Flutter

Source Code

Network Image Size in Dart

Source Code

Animated Icons in Flutter

Source Code

Custom Scroll Views in Flutter

Source Code

Parallax App Bar in Flutter

JSON HTTP Requests in Dart

URL Timeouts in Dart

Detecting URL File Types in Dart

Paginated Lists in Dart

Requesting DELETE on APIs in Dart

Animated Containers in Flutter

Hiding Widgets in Flutter

Simple Opacity Animation in Flutter

Vignette Widget in Flutter

Drop Down Button Configuration and Usage in Flutter

Expandable List Items in Flutter

Infinite Scrolling in Flutter

Infinite Arrays in Dart

Custom Color Picker Component in Flutter

Displaying and Reacting to Switches in Flutter

Displaying Bottom Bars in Flutter

Displaying Buttons on AppBar in Flutter

Displaying Bottom Sheets in Flutter

Converting Enums to Radio Buttons in Flutter

Check Existence of Websites in Flutter

Images inside AlertDialog in Flutter

Returning Values from AlertDialog in Flutter

Simple Grid View in Flutter

Rendering Bullet Points in Flutter

Retrying Futures in Flutter

Containers as ClipOvals in Flutter

Rich Texts in Flutter

Wrapping Widgets in Flutter

Sweep Gradients in Flutter

Stream and StreamBuilder in Flutter

Blur Effect in Flutter

Convert Enums to Strings in Dart

Replacing Text in TextField in Flutter

Aspect Ratio in Flutter

Zoom and Pan in Flutter

Resizing Images in Flutter to Fit Screen Height

Validating URLs in Flutter

FrameBuilder for Network Images in Flutter

Adding Shadow to Icons in Flutter

Calculating Median of Lists in Dart

Generic Functions with Reduce in Dart

Passing Back Data From a Screen to the Previous One in Flutter

Flinging an Animation in Flutter

Fade Animations in Flutter

Throttling User Input in Flutter

Censoring TextFields in Flutter

Customizing TextButton in Flutter

Multiline TextFields in Flutter

Filtering TextField Input in Flutter

Focusing Manually on TextFields in Flutter

Data Streams Over HTTP/HTTPs in Dart

Catching Nonexistent Accessors or Methods in Dart

Using Expando in Dart

Implementing Custom Maps in Dart

Dynamically Calling Functions in Dart

Factory Constructors in Dart

Calculating the Sum of List Items in Dart

Removing Duplicate Strings in Lists in Dart (Case-Insensitive)

Implementing Range in Dart

Converting Lists to Maps in Dart

Implementing Hashable in Dart

Random Name Generator in Dart

Capturing Stack Traces in Dart Exceptions

Removing Duplicates from Lists in Dart

Optional Spread Operator in Dart

Calling Optional Functions in Dart

Odd-Even Sort in Dart

Implementing Zip and Tuples in Dart

Swapping Values in Lists with XOR in Dart

Waiting for Multiple Futures in Dart

Using Queues as Stacks in Dart

Custom Iterators in Dart

Iterables as Ranges and Transform in Dart

Errors vs Exceptions in Dart

Custom Annotations in Dart

Classes as Enums in Dart

Spread Operator in Collection Literals in Dart

StreamBuilder and StreamController in Dart

Almost Equal in Dart

Enum Associated Values in Dart

Implementing Comparable in Dart

Implementing Custom Integer Types in Dart

Custom Subscripts in Dart

Dart List Enumeration with Index

Applying Mixins to Other Mixins in Dart

Parameter Types in Dart

Custom Exceptions in Dart

rethrowing Exceptions in Dart

mixins and JSON Parsing in Dart

mixins vs abstract classes in Dart

Drawing Shapes in Flutter with LayoutBuilder, CustomPaint and CustomPainter

Generic Type Aliases in Dart

Callable Classes in Dart

Synchronous Generators in Dart

Implicit Interfaces in Dart

Did you know that in #Dart, every #class implicitly exports an #interface that can be #implemented (as opposed to #extended) by other classes? This is called "implicit interface".

Do you know how "const" constructors work in #Dart?

Did you know that in #Dart, it is actually preferred to use #async and #await over using raw #Futures?

In #Dart, you can use a combination of #Initializer #List plus default values for your class #member #fields to create elegant and handy convenience initializers

Did you know that in #Dart, you can extract elements of a certain type from your Lists using the #whereType #generic #function instead of calculating the #equality yourselves?

Do you know about #Type #Promotion in Dart?

"address" is an optional field of the "Person" class. If you look at the "doThis()" function you see that I'm saving the value of address in a local variable and then comparing it with null and then returning if it's null. The Dart compiler is intelligent enough to understand that after the if-statement, "address" is NOT null anymore since you've already compared it with null and returned from the function.

If you look at the "insteadOfThis" function, the first one, the Dart compiler cannot make the same assumption if you don't first store the value of address in a local variable. In that first function the Dart compiler, even after the if-statement, needs you to refer to address as an optional, using "address?" syntax.

The mechanism the Dart compiler uses in the "doThis()" function is called Type Promotion.

4 lines of #Dart code that include the #spread operator, #cascade #operator, #generics, #extensions, #private prefix and #getters

Functions as First Class Citizens in Dart

GitHub

https://github.com/vandadnp/flutter-tips-and-tricks
Comments
  • 1. Built-in way to get sum and average of list items in dart

    You use the reduce method to get the sum of list items in dart. Calculating the Sum of List Items in Dart

    Actually there is a built-in way for doing that:

    import 'package:collection/collection.dart';
    
    void main() {
      final list = [1, 2, 3, 4];
      final sum = list.sum;
      print(sum); // prints 10
      final average = list.average; 
      print(average); // prints 2.5
    }
    
    Reviewed by tmaihoff at 2021-10-25 16:35
  • 2. Can't access the tips and tricks anymore using the normal url

    Hello Vandad, that's for creating such a useful project. I've been playing around with loading the tips and trick in the terminal for a while now using this method Flutter Tips and Tricks in Terminal but just now the link doesn't show all the images and dart code just the .md files. Is there a new method to get each tip with its image and source code now? I'm creating an open source app using this repo and would really like it to work out.

    I also can't get the dart files now, https://raw.githubusercontent.com/vandadnp/flutter-tips-and-tricks/main/tipsandtricks/implementing-zip-and-tuples-in-dart/implementing-zip-and-tuples-in-dart.dart This like gives me a 404 error. But I can access the .jpg freely.

    Reviewed by Nana-Kwame-bot at 2022-06-23 21:39
  • 3. Integer range optimization

    Hi. The extension method to could be made more optimized or idiomatic (since its return type is declared as Iterable) by avoiding unnecessary array creation. The code won't be as pretty though 😃

    https://github.com/vandadnp/flutter-tips-and-tricks/blob/4c11641aa5945582a8f5f496f8977a6fc3746854/source/integer-range-extension-in-dart.dart#L15-L19

    vs

    extension To on int {
      Iterable<int> to(int other, [bool inclusive = true]) sync* {
        if (other > this) {
          for (int i = this; i < other; i++) yield i;
        } else {
          for (int i = this; i > other; i--) yield i;
        }
    
        if (inclusive) yield other;
      }
    }
    
    Reviewed by sullenel at 2022-05-20 22:35
  • 4. Tip 196: Error Handling Value Passing

    About https://github.com/vandadnp/flutter-tips-and-tricks/tree/main#future-error-handling-in-dart

    Maybe a note would be helpful, to use that with caution. The creation of the error-value could be expensive and with your approach, I would create that object all the time, even if I don't need it. That is the reason, as far as I know, to pass a creation function into it. Just my thought to avoid bad designs for newcomers to dart.

    Thanks for all your tips, I like it a lot.

    Reviewed by malmi at 2021-12-08 09:47
  • 5. "Converting Lists to Maps in Dart" should use literals

    43 - Converting Lists to Maps in Dart

    const list = ['this','is','a','long','text'];
    
    final map = {for (final s in list) s:s.length}; /// <= this way!
    
    void main() {
      for (final e in map.entries) {
        print('"${e.key}" length is ${e.value}');
      }
    }
    
    Reviewed by iapicca at 2021-04-25 08:52
  • 6. extension OrDefault on T does not work

    As suggested at https://github.com/vandadnp/flutter-tips-and-tricks/blob/main/tipsandtricks/default-value-for-optionals-in-dart/default-value-for-optionals-in-dart.md

    I declared:

    extension OrDefault<T> on T {
      T get orDefault {
        final value = this;
        if (value == null) {
          return {
            int: 0,
            String: '',
            double: 0.0,
            num: 0,
            bool: false,
            Map: {},
            List: [],
            Set: {},
          }[T] as T;
        } else {
          return value;
        }
      }
    }
    
      test('Test ObjectExtension.orDefault()', () async {
        const int? nullInt = null;
        expect(nullInt.orDefault, 0); // fails since T is int? and returns null instead of 0.
      });
    
    Reviewed by gaddlord at 2022-07-26 16:52

Related

Flutter tips and tricks to make the development smoother and easier
Flutter tips and tricks to make the development smoother and easier

Table of Contents Custom Clippers in Flutter Check if Website is Up or Down in Dart Section Titles on ListView in Flutter Circular Progress in Flutter

Apr 1, 2022
Simple and easy-to-use Dart wrapper for HackerEarth API (Compile & Run)
Simple and easy-to-use Dart wrapper for HackerEarth API (Compile & Run)

HackerEarth API Simple and easy-to-use Dart wrapper for HackerEarth API which provides endpoints for compiling and running code in several languages.

Dec 21, 2019
App concept created with Flutter using Dart programming language, inspired by Multi Search By Categories.
App concept created with Flutter using Dart programming language, inspired by Multi Search By Categories.

Photography Explorer Flutter App App concept created with Flutter using Dart programming language, inspired by Multi Search By Categories. About This

Jul 15, 2022
Learn Dart with this cheat sheet

Learn Dart with this cheat sheet This project starts from Hello World untill the end of the Dart :) Simple example Hello World in Dart void main() {

Jul 21, 2022
Learn Dart with this cheat sheet

Learn Dart with this cheat sheet This project starts from Hello World untill the end of the Dart :) Simple example Hello World in Dart void main() {

Jan 16, 2022
Functional batteries for Dart programming language.

Lightweight and practical functional library for Dart programming language. The goal of this library is not having deep and hardcore FP features. If y

Jul 25, 2022
It says it all. Not In Flutter Docs, a sort of underground guide to flutter app development and design.
It says it all. Not In Flutter Docs, a sort of underground guide to flutter app development and design.

Not In Flutter Docs It says it all. Not In Flutter Docs, a sort of underground guide to flutter app development and design. Licenses Code is under BSD

Jul 26, 2022
Based on Microsoft Fluent Design System and made using the help of Flutter VelocityX.

Vx Fluent UI for Flutter Based on Microsoft Fluent Design System and made using the help of Flutter VelocityX. VxFluentUI is a Flutter component libra

Jan 28, 2022
A Flutter implementation of an expandable and animated floating search bar, also known as persistent search.
A Flutter implementation of an expandable and animated floating search bar, also known as persistent search.

Material Floating Search Bar A Flutter implementation of an expandable floating search bar, also known as persistent search, similar to the ones used

Mar 3, 2022
A Flutter widget that scrolls text widget and other widget
A Flutter widget that scrolls text widget and other widget

marquee_widget A Flutter widget that scrolls Widget Text and other Widget with supported RTL. Provides many customizationsincluding custom scroll dire

Aug 6, 2021
Spreadsheet Decoder is a library for decoding spreadsheets for ODS and XLSX files.

Spreadsheet Decoder Spreadsheet Decoder is a library for decoding and updating spreadsheets for ODS and XLSX files. Usage On server-side import 'dart:

Jul 3, 2022
🎓Flutter TodoList tutorial
🎓Flutter TodoList tutorial

Todo List built with Flutter Built with Git Tutor This tutorial will walk you through the process of building of a simple todo-list with Flutter Getti

Aug 8, 2022
Highly Subjective Roadmap to Flutter Development
Highly Subjective Roadmap to Flutter Development

Flutter Roadmap Dev Environment https://learngitbranching.js.org Language https://dart.dev/guides/language/language-tour https://dart.dev/guides/langu

Aug 15, 2022
Learn to Code While Building Apps - The Complete Flutter Development Bootcamp

Learn to Code While Building Apps - The Complete Flutter Development Bootcamp

Aug 14, 2022
Learn Flutter in 30 Days

flutter_catalog A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Aug 9, 2022
Personal Knowledge Base (PKB). Flutter Responsive Web, Desktop, Android, iOS app. MobX as state management.

PKB - Responsive Flutter Web / Desktop / Android / iOS "Personal Knowledge Base" app written on Flutter. >> View DEMO Video About project This project

Aug 7, 2022
Flutter Portfolio App Concept - Day 33
Flutter Portfolio App Concept - Day 33

Flutter Portfolio App Concept - Day 33

May 5, 2022
An awesome Flutter 3d project by Flutter_Cube package

flutter3d A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

Oct 26, 2021
Flutter Tutorial - Speech To Text & Voice Recognition
Flutter Tutorial - Speech To Text & Voice Recognition

Flutter Tutorial - Speech To Text & Voice Recognition Let's build a Speech To Text Flutter app which recognizes & analyzes your words to execute comma

Nov 3, 2021