erluxman

Flutter Tips 78-84

June 28, 2020 • ☕️ 4 min read

Day 78 Easy navigation

Have you been navigating to different screen like this?

❌ Dont do this anymore ❌

Navigator.of(this).push(
      MaterialPageRoute(builder: (context) => NextScreen()),
    );

✅ Do this ✅

  1. Define a simple extension on BuildContext.

    extension NavigationExtension on BuildContext {
      
      navigateTo(Widget destination) {
        Navigator.of(this).push(
          MaterialPageRoute(builder: (context) => destination),
        );
      }
    }
  2. 🎉 Celebrate 🎉 🎉

    context.navigateTo( NextScreen());
    context.navigateTo( SeventhScreen());
    context.navigateTo( SettingPage());

#Day 79 Just import every folders inside assets rather than every files

It’s too much of work 😰🥱 to import every assets like image 🏞, json , audio 🎵into pubspec.yml

But sadly 😢, you can’t import just the assets folder.

Just import all the folders, it will work 🎉🍾.

import

#Day 80 Make a class of Resources like R.string, R.svg,R.images, R.flare etc instead of direct asset path

Instead of using raw string, path & URLs, we can organize them in Resource classes.

Group constants, paths and strings by their types

class Strings {
  String appName = "Productive";
  String privacyURL = "https://blabla.com";
}
class SVGImages { String homeIcon = "assets/images/home.svg";}
class LottieFiles { String paperPlane = "assets/lottie/paper_plane.json";}    

Organize all resource into one class

class R {
  static Strings strings = Strings();
  static SVGImages svgImages = SVGImages();
  static LottieFiles lottieFiles = LottieFiles();
}

Use resources instead of raw strings and path

// ❌ Don't use raw Strings & Paths ❌
Text("Productive"),
Image.asset("assets/images/home.svg"),
Lottie.asset("assets/lottie/paper_plane.json"),   

// ✅ Acess String & Pathsfrom Resource ✅
Text(R.strings.appName),
Image.asset(R.svgImages.homeIcon),
Lottie.asset(R.lottieFiles.paperPlane),

#Day81 use https://app.quicktype.io/ to generate serializer/deserializer for dart

Convert a JSON into Dart class with fromJSON() and toJSON() methods easily with quicktype.io

Just paste your JSON and select dart from languages (right-top), you will get the dart class.

try quicktype

app.quicktype.io

Alternative:

Or json to dart

quicktype

#Day82 Loading PDF

You can display PDF easily with pdf_flutter

  1. Add pdf_flutter on pubspec.yml

    dependencies:
      pdf_flutter: ^version
  2. On iOS enable PDF preview like by adding this on ios/Runner/info.plist:

    <key>io.flutter.embedded_views_preview</key>
    <true/>
  3. Start Using

    //Load PDF from Network
    PDF.network(
        'https://raw.githubusercontent.com/FlutterInThai/Dart-for-Flutter-Sheet-cheet/master/Dart-for-Flutter-Cheat-Sheet.pdf',
        height: 500,
        width: 300,)
    
    //Load PDF from Assets
    PDF.assets("assets/pdf/demo.pdf",height:400,width:300)
    
    //Load PDF from file
    File fileName;
    PDF.file(fileName,height:400,width:300)

Visit pdf_flutter

pdf_flutter

#Day83 flutter clean

An obvious but underappreciated tip:

More than half of the unexpected/strange build errors can be solved by flutter clean

The first step towards fixing any build errors in Flutter should be:

flutter clean 

🤡Remember this command, it will save you hours of frustration

#Day 84 Use Alice plugin to inspect network requests like chuck

Alice records Http request,payload & response which can be viewed in simple UI (notification or widget). Alice can work with http:http, dart:io/HttpClient, Chopper & Dio.

Steps

  1. Add dependency.
  2. Create Alice instance (global is OK)

    Alice _alice = Alice(showNotification: true, showInspectorOnShake: true);
  3. Pass _alice.getNavigatorKey() as NavigatorKey of Material/Cupertino App.

    MaterialApp(
        navigatorKey: _alice.getNavigatorKey(),
        child:....
    )
  4. Start logging (using http:http for sample)

    import 'package:http/http.dart' as http;
    
    http
        .post('https://jsonplaceholder.typicode.com/posts', body: body)
        .interceptWithAlice(_alice, body: body);
    
    http
        .get('https://jsonplaceholder.typicode.com/posts')
        .interceptWithAlice(_alice);
    
    http
        .put('https://jsonplaceholder.typicode.com/posts/1', body: body)
        .then((response) {
      _alice.onHttpResponse(response, body: body);
    });
  5. See the HTTP call details
    Simply call _alice.showInspector();

    or

    Just shake the phone

    to

    open the Http call details screen.

get alice

alice