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.