Google’s Flutter Quick Tips

Here are few quick tips for flutter developers..

Watch Video Tutorial

1. Timer

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

2. Get Device Type

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

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

3. ToolTips

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

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

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

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

5. Cache Image

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

dependencies:
  flutter: 
    sdk: flutter

  ...
  cached_network_image: ^1.0.0 
  ...

6. ListView inside a Column Widget

If you are adding a ListView inside a Column widget, make sure you add it inside a 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 it. Watch the youtube video to see all these in action.
Thanks.

Please leave your valuable feedback below this post.

Leave a Reply Cancel reply