DEV Community: Elijah L.

When can Dart's mixins become helpful in Flutter

Elijah L. — Mon, 04 Oct 2021 21:08:41 +0000

The Dart mixin can be a powerful tool in your projects. But without proper care, it can lead to unnecessary, un-scalable complexity.

So when should a mixin be used? According to Dart:

Mixins are a way of reusing a class’s code in multiple class hierarchies.

Navigation & Routes

Let's go through an example where we can move a projects navigation to a mixin. Here we have two simple pages: HomePage and DetailsPage:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: TextButton(
          child: Text('DETAILS PAGE'),
          onPressed: () => Navigator.push(
            context,
            MaterialPageRoute(builder: (_) => DetailsPage()),
          ),
        ),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Details Page')),
      body: Center(
        child: TextButton(
          onPressed: Navigator.of(context).pop,
          child: Text('GO BACK'),
        ),
      ),
    );
  }
}

At this time we are pushing the DetailsPage as most probably would using the Navigator.push method. But what happens when have many different places the page is being pushed from? This leads to re-writing the same push call many times.

Navigator.push(
  context,
  MaterialPageRoute(builder: (_) => DetailsPage()),
)

But this can be moved into a mixin and can be added to our HomePage class!

mixin MyRoutesMixin on Widget {
  Future<T?> pushDetailsPage<T extends Object?>(BuildContext context) =>
      Navigator.push<T>(
        context,
        MaterialPageRoute(builder: (_) => DetailsPage()),
      );
}

class HomePage extends StatelessWidget with MyRoutesMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: TextButton(
          child: Text('DETAILS PAGE'),
          onPressed: () => pushDetailsPage(context),
        ),
      ),
    );
  }
}

Let's continue building off of this example.

Logging & Telemetry

Let's say you now have a logger that needs to track when a button is pressed. And your Logger class looks like this (pretend that it's actually sending data to an endpoint on the log() method):

class Logger {
  const Logger();
  void log(String label, DateTime dateTime) {
    print('PRESSED: $label at $dateTime');
    // TODO: complete the logger
  }
}

But you shouldn't have to create a new Logger instance each time you need to use it in a widget. So let's do that in a mixin:

mixin LoggerMixin {
  static const _logger = Logger();
  void logButtonPressed(String label) => _logger.log(label, DateTime.now());
}

Let's add it to our DetailsPage widget and test it with a new button.

class DetailsPage extends StatelessWidget with LoggerMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Details Page')),
      body: Center(
        child: Column(
          children: [
            TextButton(
              onPressed: Navigator.of(context).pop,
              child: Text('GO BACK'),
            ),
            TextButton(
              // Using the new mixin here
              onPressed: () => logButtonPressed('EXAMPLE'),
              child: Text('EXAMPLE'),
            ),
          ],
        ),
      ),
    );
  }
}

Common Strings

Sometimes you will need something as simple as text and other data accessible to your widgets. A mixin be the perfect example for that. Let's move all of our "commonly" used Strings into a mixin.

mixin MyApplicationStrings {
  final example = 'EXAMPLE';
  final goBack = 'GO BACK';
  final detailsPage = 'Details Page';
  final homePage = 'Home Page';
}

class HomePage extends StatelessWidget
    with MyRoutesMixin, MyApplicationStrings {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(homePage)),
      body: Center(
        child: TextButton(
          child: Text(detailsPage.toUpperCase()),
          onPressed: () => pushDetailsPage(context),
        ),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget
    with LoggerMixin, MyApplicationStrings {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(detailsPage)),
      body: Center(
        child: Column(
          children: [
            TextButton(
              onPressed: Navigator.of(context).pop,
              child: Text(goBack),
            ),
            TextButton(
              onPressed: () => logButtonPressed(example),
              child: Text(example),
            ),
          ],
        ),
      ),
    );
  }
}

Conclusion

All of the examples provided can be found here on DartPad.

This is not a perfect example nor use case of each item shown. They are only created to introduce you to how mixins could be used. In fact, there are many more excellent ways to use them. Without careful use, they can become a hot mess.

Handy tools for your next Flutter project

Elijah L. — Fri, 30 Jul 2021 15:40:38 +0000

1: `scrcpy`: Control Android devices connected on USB

Genymobile / scrcpy

Display and control your Android device

I've been using this tool for demoing, side-by-side mock-ups to screen, and getting emulator-like experience on a physical device's performance, easier screenshots, etc. This has been one the most useful tools for an Android developing experience for flutter developers.

2: Mockoon: Create mock APIs in seconds

mockoon / mockoon

Mockoon is the easiest and quickest way to run mock APIs locally. No remote deployment, no account required, open source.

A simple, intuitive, local web service environment that will have you setting up API calls faster than the Firebase local emulator. This one is a favorite for viewing logs, creating routes on uncaught requests, and multiple environments.

3: Lefthook for linting and analysis before pushing and committing

evilmartians / lefthook

Fast and powerful Git hooks manager for any type of projects.

Execute custom commands triggered by git actions. In my opinion it is much simpler than using traditional local git hooks.

# On `git commit` lefthook will run `flutter format` and `flutter test`.
pre-commit:
  commands:
    flutter-format:
      glob: "*.dart"
      run: flutter format {staged_files}
    flutter-test:
      glob: "*.dart"
      run: flutter test

4: Mason: Create and consume reusable templates

felangel / mason

A CLI which allows developers to create and consume reusable templates called bricks.

Mason allows developers to create and consume reusable templates called bricks.

This tooling feels similar to snippets, but allows you bulk-create your project's boiler plate code.

5: Flutter DevTools - Network & Flutter Inspector

Network & Flutter Inspector are the two most useful tools in my utility belt. The network tools is extremely helpful in determining how many calls are being made for service and ensuring the data in the channel is formatting and not being mutated unknowingly. The Flutter Inspector is handy for exploring your widget tree. Two handy uses from the inspector are the "Select widget mode" for quickly finding a UI component and the the "Debug paint" for getting layout and sizing just right with Flutter's flex-like widgets.

These may seem obvious to some but many new developers don't take advantage of these two immensely helpful utilities (and along with the rest of the DevTools Suite)!

6: Add user snippets live templates to your editor

The two primary code editors for the Flutter developer are Visual Studio Code and Android Studio/IntelliJ IDEAs. Many extension/plugins are offered on these platforms that include snippets and live templates, but sometimes these pieces of code don't fulfill your needs. You are able to create your own with each of the platforms. See the below pages to et more information for you prefer editor:

Effective Dart Tricks

Elijah L. — Tue, 11 May 2021 16:03:36 +0000

No intro here, let's jump into some effective Dart language tricks and features.

Trick 1: Use the linter!

You're probably using VS Code or Android studio for development in Dart or Flutter projects. Anytime you see the red, blue, grey, or squiggles underneath your "bad" code - that's the linter at work.

All Dart and Flutter linter rules can be found here. See if any of these tickle your fancy.

To add one of these rules to your project, follow these steps:

Create a new analysis_options.yaml file at the root off your project. This will be in the same directory as your pubspec.yaml file.
Add the following snippet to tell your editor's analysis server there are some rules you'll be adding:

linter:
  rules:

Select a rule from the list and add it to your analysis_options.yaml

linter:
  rules:
    - lines_longer_than_80_chars
    - another_rule # add any rule from that list here

Trick 2: Prevent classes from being inherited and instantiated

Typically, an abstract class would be used to create a non-instantiatable class. But occassionally you'll have a class you don't want inherited as well.

The Flutter SDK usees this trick internally with Curves and other classes.

class SomeClass {
  SomeClass._(); // Use a private, unnamed constructor.

  /// All members should now be static.
  static const name = 'SomeClass';

  /// Methods should be pure and static as well.
  static String someFunction(String person) => 'Hello, $person!';
}

Use a private, unnamed constructor. To use any member with this class, you should use the key word static. Since static objects are class-level (not instance-level). It operates similarly to an enum object when accessing values, but this is a bit more robust for those certain circumstances.

Trick 3: Implementing you own operator for an object

The +, -, and / are all examples of operators that can be overwritten for your class. For example, let's create a class that you want to add two values objects together to achieve a deterministic result.

With coordinate points, we know you can add two points together to get a new point value. Here, we'll demonstrate that simply by defining the behavior of the + operator.

class Point {
  Point(this.x, this.y);

  final int x;
  final int y;

  /// Sum of two points.
  Point operator +(Point other) => Point(
        this.x + other.x,
        this.y + other.y,
      );
}

This functionality can also be achieved on existing classes with an extension.

extension DateTimeOperators on DateTime {

  /// Date after a [duration] of time.
  DateTime operator +(Duration duration) => this.add(duration);

  /// Difference between [this] duration the [other].
  Duration operator -(DateTime other) => this.difference(other);
}

PS: for a full list of operator that can be used check out this section of Dart's language tour.

Trick 4: Use `typedef` to keep code concise.

The typedef key word is use to assign a function-type alias to a function.

I have found this most useful in Flutter development when I need to execute a function with a large signature name. For example:

This widget has a long onPressed signature for that member:

class HomePage extends StatelessWidget {
  HomePage(this.onPressed);

  // This is a long signature that can be reduced via typedef.
  final void Function(ViewModel, DateTime) onPressed;

  @override
  Widget build(BuildContext context) {...}
}

But we can keep it concise with typedef:

// Our new signature for this function.
typedef ViewModelCallback = void Function(ViewModel, DateTime);

class HomePage extends StatelessWidget {
  HomePage(this.onPressed);

  // The function member with a new signature.
  final ViewModelCallback onPressed;

  @override
  Widget build(BuildContext context) {...}
}

Trick 5: Use an `extension` on `enum` to add more fuctionality

You've already seen an extension used in this list to add functionality, but try using an extension on an enum to give it this little bit of functionality that you need.

enum DayOfTheWeek {
  sunday,
  monday,
  tuesday,
  wednesday,
  thursday,
  friday,
  saturday,
}

extension DayOfTheWeekX on DayOfTheWeek {
  /// The shorthand or abbreviated string of this day of the week.
  String get abbreviation => _abbreviationMap[this]!;

  // a mapping of all the abbreviations
  static const _abbreviationMap = {
    DayOfTheWeek.sunday: 'Sun',
    DayOfTheWeek.monday: 'Mon',
    DayOfTheWeek.tuesday: 'Tue',
    DayOfTheWeek.wednesday: 'Wed',
    DayOfTheWeek.thursday: 'Thur',
    DayOfTheWeek.friday: 'Fri',
    DayOfTheWeek.saturday: 'Sat',
  };
}