SoFunction
Updated on 2025-04-10

Summary of commonly used plug-ins for Flutter

DIO network request framework

When it comes to Flutter's network framework, we have to mention DIO, and it is proud that DIO was developed by Chinese people! DIO, as a network framework, implements all network requests, including GET, POST, PUT, PATCH, DELETE, etc. It also supports interceptors, error capture and file download. With the help of DIO, the data interaction between the Flutter App and the backend can be quickly completed. The sample code is as follows:

Response response;
var dio = Dio();
response = await ('/test?id=12&name=wendu');
print(());
// Optionally the request above could also be done as
response = await ('/test', queryParameters: {'id': 12, 'name': 'wendu'});
print(());

The latest version of DIO is 4.0, with nearly 10,000 Stars on github, with a popularity index of 99%, and the project address is:/packages/di…​

url_launcher system application jump

In the App, you will inevitably use url to jump to the system browser or other applications. At this time, url_launcher comes in handy, and the usage is very simple:

import 'package:flutter/';
import 'package:url_launcher/url_launcher.dart';

const _url = '';

void main() => runApp(
      const MaterialApp(
        home: Material(
          child: Center(
            child: RaisedButton(
              onPressed: _launchURL,
              child: Text('Show Flutter homepage'),
            ),
          ),
        ),
      ),
    );

void _launchURL() async =>
    await canLaunch(_url) ? await launch(_url) : throw 'Could not launch $_url';

url_launcher supports jumping to the system's browser to open web pages, jumping to make calls and sending text messages interfaces. It is 100% popular on pubs, and the project address is:/packages/ur…​

flutter_easyrefresh up and down to refresh

The best choice for loading data from up and down in flutter is also developed by Chinese people. It supports the application of pull-up or pull-down refresh on most components. The usage method is also very simple, and it also supports custom header and footer.

import 'package:flutter_easyrefresh/easy_refresh.dart';
//...
  EasyRefresh(
    child: ScrollView(),
    onRefresh: () async{
      ....
    },
    onLoad: () async {
      ....
    },
  )

flutter_easyrefresh is 95% popular on pub, and the project address is:/packages/fl…

flutter_swiper carousel component

flutter_swiper is a carousel component, known as the best carousel component for flutter. flutter_swiper supports automatic carousel, displaying page indication, animation duration, click callback and other parameter settings.

new Swiper(
  itemBuilder: (BuildContext context, int index) {
    return new (
      "/288x188",
      fit: ,
    );
  },
  itemCount: 10,
  viewportFraction: 0.8,
  scale: 0.9,
)

flutter_swiper has reached 99% popularity, and the project address is:/packages/fl…

catcher exception capture

catcher is a flutter global exception catching plug-in that can automatically catch system exceptions, and can specify the exception reporting address to automatically report running errors to the server, so as to facilitate developers to track bugs in the program and then fix them.

import 'package:flutter/';
import 'package:catcher/';

main() {
  /// STEP 1. Create catcher configuration. 
  /// Debug configuration with dialog report mode and console handler. It will show dialog and once user accepts it, error will be shown   /// in console.
  CatcherOptions debugOptions =
      CatcherOptions(DialogReportMode(), [ConsoleHandler()]);
      
  /// Release configuration. Same as above, but once user accepts dialog, user will be prompted to send email with crash to support.
  CatcherOptions releaseOptions = CatcherOptions(DialogReportMode(), [
    EmailManualHandler(["support@"])
  ]);

  /// STEP 2. Pass your root widget (MyApp) along with Catcher configuration:
  Catcher(rootWidget: MyApp(), debugConfig: debugOptions, releaseConfig: releaseOptions);
}

catcher has reached 95% popularity, and the project address is:/packages/ca…​

cached_network_image network image loading cache

cached_network_image is somewhat similar to iOS's SDWebImage, which can cache loaded images without repeated downloads, which not only improves loading speed but also saves network resource requests. At the same time, cached_network_image supports placeholder components with placeholder maps, loading progress and request failures, which can achieve a good user experience.

CachedNetworkImage(
        imageUrl: "/350x150",
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(),
     ),
//......

cached_network_image has reached 99% popularity, and the project address is:/packages/ca…

shared_preferences Local offline key-value pair cache

shared_preferences is similar to NSUserDefaults for iOS and SharedPreferences for Android. It supports simple key-value pairs for apps to be offline cached, and is very suitable for storing simple data offline. However, it should be noted that the offline write operation of the plug-in is asynchronous, so it cannot guarantee that 100% storage will be successful after the write is returned. Therefore, it is not recommended to use it for very critical data.

import 'package:flutter/';
import 'package:shared_preferences/shared_preferences.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
      child: RaisedButton(
        onPressed: _incrementCounter,
        child: Text('Increment Counter'),
        ),
      ),
    ),
  ));
}

_incrementCounter() async {
  SharedPreferences prefs = await ();
  int counter = (('counter') ?? 0) + 1;
  print('Pressed $counter times.');
  await ('counter', counter);
}

The popularity of shared_preferences is 100%, and the project address is:/packages/sh…

image_picker and multi_image_pikcer image selectors

image_picker and multi_image_picker are picture selectors. The former supports single image selection, and the latter supports multi-picture selection. Both support cameras or selecting pictures from albums. It should be noted that the default language of multi_image_picker is in English and you need to configure the local language yourself.

import 'dart:io';

import 'package:flutter/';
import 'package:image_picker/image_picker.dart';

//......

class _MyHomePageState extends State<MyHomePage> {
  File _image;
  final picker = ImagePicker();

  Future getImage() async {
    final pickedFile = await (source: );

    setState(() {
      if (pickedFile != null) {
        _image = File();
      } else {
        print('No image selected.');
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Picker Example'),
      ),
      body: Center(
        child: _image == null
            ? Text('No image selected.')
            : (_image),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: getImage,
        tooltip: 'Pick Image',
        child: Icon(Icons.add_a_photo),
      ),
    );
  }
}

The image_picker project address is:/packages/im…, the multi_image_picker project address is:/packages/mu…。​

marquee scroll text component

When the text is too long, you can use marquee if you don’t want to wrap or truncate it. Marquee will automatically scroll the report after the text exceeds the width of the container. At the same time, marquee supports setting multiple parameters of text, such as font, scrolling direction, white space, scrolling speed, etc.

Marquee(
  text: 'Some sample text that takes some space.',
  style: TextStyle(fontWeight: ),
  scrollAxis: ,
  crossAxisAlignment: ,
  blankSpace: 20.0,
  velocity: 100.0,
  pauseAfterRound: Duration(seconds: 1),
  startPadding: 10.0,
  accelerationDuration: Duration(seconds: 1),
  accelerationCurve: ,
  decelerationDuration: Duration(milliseconds: 500),
  decelerationCurve: ,
)

The popularity of marquee is 96%, and the project address is:/packages/ma…。​

sqflite local database access

sqflite, we know from the name, it is a tool for accessing sqlite databases on mobile phones. It supports all additions, modifications, deletions and search operations of sqlite databases, and also supports transactions and batch operations. SQL operations support direct execution of SQL statements and also support template syntax.

// Get a location using getDatabasesPath
var databasesPath = await getDatabasesPath();
String path = join(databasesPath, '');

// Delete the database
await deleteDatabase(path);

// open the database
Database database = await openDatabase(path, version: 1,
    onCreate: (Database db, int version) async {
  // When creating the db, create the table
  await (
      'CREATE TABLE Test (id INTEGER PRIMARY KEY, name TEXT, value INTEGER, num REAL)');
});

// Insert some records in a transaction
await ((txn) async {
  int id1 = await (
      'INSERT INTO Test(name, value, num) VALUES("some name", 1234, 456.789)');
  print('inserted1: $id1');
  int id2 = await (
      'INSERT INTO Test(name, value, num) VALUES(?, ?, ?)',
      ['another name', 12345678, 3.1416]);
  print('inserted2: $id2');
});

// Update some record
int count = await (
    'UPDATE Test SET name = ?, value = ? WHERE name = ?',
    ['updated name', '9876', 'some name']);
print('updated: $count');

// Get the records
List<Map> list = await ('SELECT * FROM Test');
List<Map> expectedList = [
  {'name': 'updated name', 'id': 1, 'value': 9876, 'num': 456.789},
  {'name': 'another name', 'id': 2, 'value': 12345678, 'num': 3.1416}
];
print(list);
print(expectedList);
assert(const DeepCollectionEquality().equals(list, expectedList));

// Count the records
count = Sqflite
    .firstIntValue(await ('SELECT COUNT(*) FROM Test'));
assert(count == 2);

// Delete a record
count = await database
    .rawDelete('DELETE FROM Test WHERE name = ?', ['another name']);
assert(count == 1);

// Close the database
await ();

sqflite has reached 100%. If it is better to encapsulate a layer for better maintenance in the application, the project address is:/packages/sq…

The above is the detailed content of the commonly used plug-ins of Flutter. For more information about commonly used plug-ins of Flutter, please follow my other related articles!