Flutter Quick Tips & Tricks

Here you will see some quick Flutter Coding Tips & Tricks.

Let’s start…

Flutter Quick Tips and Tricks

Watch Video Tutorial

Flutter Tips & Tricks

Dismiss Keyboard

To dismiss Keyboard, we have to set focus on a different node as shown in the example below using the Gesture Detector.

dismissKeyboard(BuildContext context) {
   FocusScope.of(context).requestFocus(new FocusNode());
 }
 
 Widget body1() {
   return GestureDetector(
     behavior: HitTestBehavior.opaque,
     onTap: () {
       _dismissKeyboard(context);
     },
     child: Container(
       color: Colors.white,
       child: Column(
         children: <Widget>[
           TextField(),
         ],
       ),
     ),
   );
 }

Color in Different ways

Color the background of a widget using opacity in different ways.
You can give RGB colors with opacity or Hex color with opacity.

Widget body2() {
    return  Container(
       color: Color.fromRGBO(0, 0, 0, 0.5),
    );
    return  Container(
      color: Color(0xFF4286f4),
    );
    return  Container(
      color: Color(0xFF4286f4).withOpacity(0.5),
    );
    return Container(
      color: Color(0xFF4286f4),
    );
  }

Rounded Container

Widget body4() {
    return Container(
      height: 40.0,
      padding: EdgeInsets.all(20.0),
      margin: EdgeInsets.all(30.0),
      decoration: BoxDecoration(
        color: Colors.green,
        borderRadius: BorderRadius.all(
          Radius.circular(5.0),
        ),
      ),
    );
  }

Container with Rounded Image

Widget body5() {
   return Container(
     width: 250.0,
     height: 300.0,
     padding: EdgeInsets.all(20.0),
     margin: EdgeInsets.all(30.0),
     decoration: BoxDecoration(
       color: Colors.green,
       borderRadius: BorderRadius.circular(50.0),
       image: DecorationImage(image: NetworkImage(imgUrl), fit: BoxFit.fill),
     ),
   );
 }

Rounded Image Using ClipOval

Widget body6() {
    return ClipOval(
      child: Image.network(
        imgUrl,
        fit: BoxFit.fill,
        width: 190.0,
        height: 190.0,
      ),
    );
  }

Rounded Image using CircularAvatar

Widget body7() {
   return Container(
     height: 300,
     width: 200,
     child: CircleAvatar(
       radius: 100.0,
       backgroundImage: NetworkImage(
         imgUrl,
       ),
     ),
   );
 }

Splash Anywhere you tap the widget using InkWell

Widget body3() {
  return Container(
    color: Colors.orangeAccent,
    height: 100.0,
    child: Material(
      color: Colors.transparent,
      child: InkWell(
        splashColor: Colors.white.withOpacity(0.2),
        onTap: this._onSelect,
        child: Center(
          child: Text("Hello"),
        ),
      ),
    ),
  );
}

Custom ListView Separator

Widget body8() {
   return ListView.separated(
     separatorBuilder: (context, index) => Divider(
           color: Colors.black,
         ),
     itemCount: 20,
     itemBuilder: (context, index) => Padding(
           padding: EdgeInsets.all(8.0),
           child: Center(child: Text("Index $index")),
         ),
   );
 }

Null Aware Operators

Here is a short hand for initializing null variables

if (imgUrl == null) {
  imgUrl =
      'https://images.pexels.com/photos/40984/animal-ara-macao-beak-bird-40984.jpeg?cs=srgb&dl=animal-colorful-colourful-40984.jpg&fm=jpg';
}

This is the shorthand for doing the above code.

imgUrl ??=
    'https://images.pexels.com/photos/40984/animal-ara-macao-beak-bird-40984.jpeg?cs=srgb&dl=animal-colorful-colourful-40984.jpg&fm=jpg';

Timer

void periodic() {
  Timer.periodic(
    Duration(seconds: 1),
    (Timer time) {
    print("time: ${time.tick}");
    if (time.tick == 5) {
        time.cancel();
        print('Timer Cancelled');
    }
   },
  );
}

Get Device Type

Two ways to get the Device, you are currently running the app on…

void getDevice() {
    bool ios = Platform.isAndroid;
    print('iOS1: $ios');
    bool isIOS = Theme.of(context).platform == TargetPlatform.iOS;
    print('iOS2: $isIOS');
}

Don’t Do

// Do not explicitly initialize variables to null.
var test; //good
var test1 = null; // bad

Fade Image

Add a ‘loading.gif’ image inside a folder ‘images’ in the root of your project. We will use this image as a placeholder for the downloading image.

Note: Make sure you specify the ‘images’ folder in the ‘assets’ section in the pubspec.yaml file which is present in the root of your project.

# To add assets to your application, add an assets section, like this:

assets:
  - images/
  ...

In Code…

Widget fadeImage() {
    return FadeInImage.assetNetwork(
        placeholder: 'images/loading.gif',
        image: fadeImgUrl,
    );
}

Cache Image

Easily Cache Images in your app.

Add the image caching plugin in the pubspec.yaml file.

dependencies:
  flutter: 
    sdk: flutter
 
  ...
  cached_network_image: ^1.0.0
  ...

ListView inside a Column Widget

If you are adding a ListView inside a Column widget, make sure you add it inside an Expanded Widget, otherwise it will result in overflow or error.

Widget list() {
    List<String> companies = [
      'Google',
      'Facebook',
      'Apple',
      'Google',
      'Facebook',
      'Apple',
      'Google',
      'Facebook',
      'Apple',
      'Google',
      'Facebook',
      'Apple',
      'Google',
      'Facebook',
      'Apple',
      'Google',
      'Facebook',
      'Apple',
      'Google',
      'Facebook',
      'Apple',
      'Google',
      'Facebook',
      'Apple',
    ];
    return Expanded(
      child: ListView.builder(
        itemCount: companies.length,
        itemBuilder: (BuildContext context, int index) {
          return Padding(
            padding: EdgeInsets.all(20.0),
            child: Text(
              companies[index],
              style: TextStyle(color: Colors.black),
            ),
          );
        },
      ),
    );
  }
 
....
// In the build method...
 
body: Container(
    padding: EdgeInsets.all(20.0),
    child: Column(
        children: <Widget>[
        list(),
        ],
    ),
),

That’s all for now.

Let me know which tip you like the most.

Please CLAP if your find this article useful and leave your valuable comments below this post.

Thanks for reading.

Please follow my channel here for more tutorials.

Visit my blog here.