How to Customize Flutter Packages to Suit Your Needs

pub.dev is Dart and Flutter’s official package deal repository. pub.dev has greater than 20,000 open supply packages. These packages fit your customized wants that the Flutter framework in itself might not suffice. At instances, a package deal you want may not have the app options or UI customizations you need. On this article, you’ll discover ways to customise Flutter packages. We are going to stroll via tips on how to entry the supply code of a given package deal, perceive the way it works, and customise it to fit your wants. To show the customization step, we’ll use an instance package deal, FlutterToast.

The right way to Use FlutterToast
FlutterToast is a package deal that pops toast as suggestions to the person. When utilizing the package deal, you present the FToast class with the toast widget via the .showToast technique. In addition to the kid toast widget, the .showToast technique takes different arguments to customise the toast. These arguments embody gravity, positionedToastBuilder, and toastDuration, which allows you to customise the toast as you need.

FlutterToast animates the toasts routinely. As of the present model of FlutterToast: v8, flutterToast animates your toast widgets with a FadeTransition. The toast subtly seems, then disappears after the set period. The .showToast technique additionally takes a fadeDuration that specifies how lengthy in milliseconds the fade transition ought to happen.

Let’s see this in motion. Have Flutter put in and dealing. When you don’t have it and also you wish to observe alongside, set up and arrange Flutter from right here. Create a brand new Flutter undertaking by operating the next command and add the FlutterToast package deal with the next instructions:

flutter create exampletoast 
cd exampletoast
flutter pub add fluttertoast

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: ExampleToast());
  }
}

class ExampleToast extends StatefulWidget {
  const ExampleToast({Key? key}) : super(key: key);

  @override
  State<ExampleToast> createState() => ExampleToastState();
}

class ExampleToastState extends State<ExampleToast> {
  late final FToast fToast;

  final Widget toast = Container(
    padding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(16),
      color: Colors.greenAccent,
    ),
    child: const Text('Successful!'),
  );

  @override
  void initState() {
    super.initState();
    fToast = FToast();
    fToast.init(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Example Toast')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              child: const Text('Show Toast'),
              onPressed: () => fToast.showToast(child: toast),
            ),
            const SizedBox(height: 32),
            ElevatedButton(
              child: const Text('Show Customized Toast'),
              onPressed: () => fToast.showToast(
                child: toast,
                fadeDuration: 3000,
                gravity: ToastGravity.TOP,
                toastDuration: Duration(seconds: 3),
              ),
            ),
          ],
        ),
      ),
    );
  }
}