10 Flutter tips — part 1/10

You can do a lot of things with Flutter. And because you can, there are so many tips & tricks that you don’t know. For this reason, in this blog post I will give you 10 Flutter beginner tips & tricks that will surely help you.

It won’t stop at this one though. There will be a total of 10 blogposts with 10 tips each, so we will end up with 100 Flutter tips.

If you don’t want to miss the other 90 tips, follow me!

In this blogpost we will mainly look at UI tips and VS code extensions.

Shimmer

If you want to create a cool shimmer effect, you can easily use the shimmer package. This can be used very well when something is loading, so the user can see that something is happening.

//pubspec.yaml
dependencies:
  shimmer: ^2.0.0

//your_file.dart
import 'package:shimmer/shimmer.dart';
SizedBox(
  width: 200.0,
  height: 100.0,
  child: Shimmer.fromColors(
    baseColor: Colors.red,
    highlightColor: Colors.yellow,
    child: Text(
      'Shimmer',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 40.0,
        fontWeight:
        FontWeight.bold,
      ),
    ),
  ),
);

Google Fonts

With the package google_fonts you can give your app a unique look by using any font from fonts.google.com.

//pubspec.yaml
dependencies:
  google_fonts: ^2.1.0

//you_file.dart
import 'package:google_fonts/google_fonts.dart';
Text('Google fonts', style: GoogleFonts.pacific),

Scaffold gradient background

The package scaffold_gradient_background is a very new package created by myself.

I don’t include it in this list because it was created by me, but because I find it very handy and use it in all my projects.

With this package you can easily set a gradient as background of a scaffold.

//pubspec.yaml
dependencies:
  scaffold_gradient_background: ^1.0.3

//your_file.dart
import 'package:scaffold_gradient_background/scaffold_gradient_background.dart';
GradientScaffold(
  gradient: LinearGradient(
    begin: Alignment.bottomLeft,
    end: Alignment.topRight,
    colors: [
      Color(0xFF8EC5FC),
      Color(0xFFE0C3FC),
    ],
  ),
  appBar: AppBar(
   title: Text('Linear Gradient Example'),
  ),
  body: Center(
  child: Text(
    'Hello ^^',
    style: TextStyle(
      color: Colors.white,
      fontSize: 30,
    ),
    ),
  ),
);

Introduction screen

If you want to have a cool introduction screen, you can use the package introduction_screen.

//pubspec.yaml
dependencies:
  introduction_screen: ^2.1.0

//your_file.dart
import 'package:introduction_screen/introduction_screen.dart';
IntroductionScreen(
  pages: listPagesViewModel,
  done: const Text("Done", style: TextStyle(fontWeight: FontWeight.w600)),
  onDone: () {
    // When done button is press
  },
),

Theming

A consistent design is important in any app. To achieve this, you can create a theme in the MaterialApp. There you can specify a primary color, text color and much more.

MaterialApp(
  title: appName,
  theme: ThemeData(
    // Define the default brightness and colors.
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],
    accentColor: Colors.cyan[600],
    // Define the default font family.
    fontFamily: 'Georgia',
    // Define the default TextTheme. Use this to specify the default
    // text styling for headlines, titles, bodies of text, and more.
    textTheme: TextTheme(
      headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
      headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
      bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
    ),
  ),
  home: MyHomePage(
    title: appName,
  ),
);

Cupertinowidgets

Flutter is made for creating apps for Android and iOS. For this reason, there are also Cupertinowidgets, which perfectly match the style of iOS. Moreover, you can also query whether the user is currently using an iOS or Android device and display the widget of your choice based on that.

Platform.isAndroid 
  ? CircularProgressIndicator() 
  : CupertinoActivityIndicator()

Dart data class generator

With this VS code extension you can easily create data classes without writing much. The generator can generate constructor, copyWith, toMap, fromMap, toJson, fromJson, toString, operator == and hashCode methods.

To VS Code Extension

Alternative Jetbrains Plugin

Flutter tree

This extension is very good for creating widget trees quickly. It is easy to use and has an easy to understand syntax:

OneChild>MultipleChild[OneChild,MultipleChild[OneChild,OneChild],OneChild>OneChild]

Example:

Center>Column[Container, Expanded>Container]
//becomes:
Center(
  child: Column(
    children: [
      Container(),
      Expanded(
        child: Container(),
      ),
    ],
  ),
),

VSCode Extension

Pubspec Assist

Almost every app in Flutter has packages that are added to pubspec.yaml.

To quickly add new packages you can use the plugin Pubspec Assist.

VSCode Extension

Alternative Jetbrains Plugin

Awesome Flutter Snippets

The normal extension for Flutter already has some snippets, however you could use so many more.
For this reason, there is the extension “Awesome Flutter Widgets”, in which you have many more snippets.

VSCode Extension

Alternative Jetbrains Plugin

Conclusion

And with that we already have 10 Flutter tips.

Part 2 will be released in a few days, so be sure to follow me on Medium and Twitter so you don’t miss it!

If you have any tips on what I can do better, feel free to comment them. In addition, I would be very happy about a few claps :)