Vinamra Singh for Quokka Labs

Posted on Sep 26, 2022

Top 10+ Flutter Tips, Tricks, and Techniques

#flutter #webdev #beginners #tutorial

Flutter is an excellent framework for building iOS and Android Apps. Developers are engaged in its single codebase system utility for cross-platform application development. Learn the essential steps and tricks to become a pro in flutter application development.

Follow These 10+ Initial Steps To Learn Flutter

To start with Flutter application development, one should be familiar with the Dart language, syntax, and the proper workflow.

Follow the essential things if anyone wants to step ahead with Flutter App development.

First, learn Dart language programming fundamentals.
Get familiar with VSCode IDE, Android Studio, and IntelliJ.
Then Learn Widgets(Inherited, Stateless, Stateful), Assets(Fonts, images, Audio, Video).
Rememeber Plugins and Packages- package_info, dio, http, font_awesome_flutter, cached_network_image, url_launcher, json_serialization, camera, etc.
Learn Animation basics: Opacity, Hero, Transform, AnimatedController, AnmatedBuilder, FadeInImage, CurvedAnimation.
Learn Navigation essentials: Transitions
Practice on Database: SQFlite shared preferences
Learn Firebase Essentials: Firebase Database, Firebase Messaging, Firebase Auth, Firebase Storage.
Learn State Management Basics: GETX, Redux, BLoC, Providers+ScopedModel, setState, MobX, provider
Learn QA Basics: A/B Testing, UserBehaviour Analytics, GooglePlay Beta tests, AppCenter. Also, QA Firebase-Analytics, App distribution, Crashlytics.
Learn Native Integration for iOS: Swift/Obj-C, AppStore, AppleCertf, x-Code, & for Android: Google PlayStore, Java/ Kotlin, Android Studio, App Signing.

Top10+ Amazing Tips & Tricks To Get Efficient With Flutter

We must research on the web and other platforms and curate tips and tricks to enhance your flutter development knowledge and skills. Read the blog till the end and learn the advanced things and shortcuts.

1.PDF file load

You can load files from three types: assets, URL, and file.
First, you need to use dependency advance_pdf_viewer to pubspec.yaml
Advance_pdf_viewer: any

Invoke loadPdf() inside initState()

import 'package:flutter/material.dart';
import 'package:advance_pdf_viewer/advance_pdf_viewer.dart';
void main() => runApp(MaterialApp(
      home: MyApp(),
    ));
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  bool _isLoading = true;
  late PDFDocument document;
  @override
  void initState() {
    super.initState();
    loadDocument();
  }
  loadDocument() async {
    document = await PDFDocument.fromAsset('assets/sample.pdf');
    setState(() => _isLoading = false);
  }
  changePDF(value) async {
    setState(() => _isLoading = true);
    if (value == 1) {
      document = await PDFDocument.fromAsset('assets/sample2.pdf');
    } else if (value == 2) {
      document = await PDFDocument.fromURL(
        "https://unec.edu.az/application/uploads/2014/12/pdf-sample.pdf",
      );
    } else {
      document = await PDFDocument.fromAsset('assets/sample.pdf');
    }
    setState(() => _isLoading = false);
    Navigator.pop(context);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: SizedBox(
          height: 36,
          child: ListTile(
            title: const Text('Load from URL'),
            onTap: () {
              changePDF(2);
            },
          ),
        ),
      ),
      appBar: AppBar(
        title: const Text('FlutterPluginPDFViewer'),
      ),
      body: Center(
        child: _isLoading
            ? const Center(child: CircularProgressIndicator())
            : PDFViewer(
                document: document,
                zoomSteps: 1,
              ),
      ),
    );
  }
}

2.Generate files with automation

You come from an IT and tech background; we look for the resources, tips, and short tricks to get our work done before the deadline. So, if you want to generate files faster, please install VS code extensions for flutter development.

3.Easy theme customization

Want to make your widget appearance more appealing & attractive? Here is the code to modify a particular widget theme in the flutter application development project.

Theme{
data:ThemeData(...)
child:TextFormField(
Decoration:const InputDecoration(
icon:Icon(Icons.person),
hintText:’type message here’,
labelText:’message*’,
),
validator:(value){
Return value!.contains(‘@’)?
‘Do not use the @ char’:null;
} 
debugPrint()

4.Access huge of data without any issue

In general, we use print() to display data. But sometimes, the system console is unable to present the complete view. We have an alternative to accessing or printing huge lines of data. Use
debugPrint() and get a detailed view.

5.Share files easily

We all love to share fun content with our friends and family. Now you can enable this functionality to your flutter app and enhance the user experience. You just need to follow a few simple steps during flutter application development.
Access pubspec.yaml

Add the package dependency: share_plus like as follow

Dependencies: share_plus:^4.0.10

Now import the package library as follow:
Import ‘package:share_plus/ share_plus.dart’;

Now next is calling the static share method anywhere in the code:
Share.share( ‘Check out my website your website url’ );

In case you are adding embedding this functionality for email, then follow the below code lines:
Share.share( ‘Check out my website your website url’ Subject: ‘type your suject ’, );

This static ShreFiles method function is accessible across all the available dart codes. You have permission to add text or subject.
Do this as follow:

Share.shareFiles(
[‘${directory.path}/image.jpg’],
Text: ‘Your text’,
);

Share.shareFiles(
[‘${directory.path}/image.jpg’,
‘${directory.path}/image.jpg’],
);

6.Modify Futter Launcher Icons

Flutter offers all the basic and advanced accessibilities to do the tasks rapidly. But we don’t have any idea to modify or change flutter icons. However, now you can try this trick and break this sigma in flutter development.

Before proceeding further, remember to use a 900x900 resolution image.

We need to design a background.png and foreground.png image. It will transform that into an adaptive icon.

https://adapticon.mariusclaret.com/

You can visit the URL to validate the adaptive icon.

Now create a single icon png.
Go to assets/ launcher/ and put these 3 images here.
Now access pubspec.yaml

dev_dependencies:
flutter Launcher_icons: "^0.7.0"
flutter icons:
ios: true
android: true
image_path_ios: "assets/launcher/icon.png"
image_path_android: "assets/launcher/icon.png" 
adaptive_icon_background: "assets/launcher/background.png"
adaptive_icon_foreground: "assets/launcher/foreground.png";

The last thing to do is command execution to get the output.

flutter packages get
flutter packages pub run flutter _launcher_icons:main

7.Efficient Debugging with Performance Overlay

You can check if the frame is suitable for easy rendering or not. You just have to mention showPerformanceOverlay, giving you output regarding the frame.

Check the Raster thread or GPU time on top and Ui time at the bottom. If the GPU graph is evident in red color, it means the scene is too long to render or fit in the frame. Similarly, the dart code is unsuitable if the Ui thread/ graph also shows the bar status in the red.

We use these tips as follows:
Return MaterialApp( showPerformanceOverlay: true; Title: CIT’, )

8.Access flashlight in Flutter application development

Now you can access flashlight accessibility to your flutter apps with a few steps of dependency and package import.
dependencies: torch_light: ^0.4.0

Below is the flutter development code you can embed into your application program:

Future<void> _turnOnFlash(BuildContext context) async {

try{
await Torch_Light.enableTorch(_);
} on Exception catch (_) {
_showErrorMes(‘Could not turn on flashlight’, context);
}
}

Future<void> _turnOffFlash(BuildContext context) async {

try{
await Torch_Light.disableTorch(_);
} on Exception catch (_) {
_showErrorMes(‘Could not turn on flashlight’, context);
}
}
void_showErrorMes(String mes, BuidContext context) {
ScaffoldMessenger.of(context)
.showSnackBar(Snackbar(Content: Text(mes)));
}
}

9.Detect Gestures easily

Flutter allows you to detect gestures for every hand move:
Use Tap for Single tap, further use double Tap, drag, zoom, press, LongPress, and more.

Container(
color:_color,
height: 200.0,
width: 200.0,
child: GestureDetector(
onTap: () =>
setState(() {_color = Colors.yellow;}),
),
 )

10.Pause Program Flow

If you want to hold the process for a while in a program, then you can use Future.delayed() and type the duration to pause the program flow. It’s just 2 line code for flutter application development.

await Future.delayed( Const Duration(seconds: type no.));

11.Add transition to any text

Want to enhance the text in the app? Follow the below code:

AnimatedDefaultTextStyle( Duration: Duration(milliseconds:300), Child: Text(“Flutter”), style:newStyle, )

12.Reduce app size

Images are responsible for slowing down the app's performance. It increases the app size, so the best way is to access any hosting entity or services like firebase or any other.

Alternatively, you should compress the image resolution and should not store them in the assets folder. It will smoothen the UI.

Additional Tips for Flutter Application Development:

You can reduce the CPU cycle for essential purposes through stateless widgets.
Prevent the reconstruction of widgets by adding one single keyword, ' const’.
Load your lists and grids slowly by adding ListView.builder.

Lets us know if you have tried these things earlier or found something exciting and new!

DEV Community