Flutter第三方插件汇总（很全）

一、常用的第三方插件

二、路由

2.1 基本跳转

• initialRoute：设置应用程序从哪一个路由开始启动，设置了该属性，就不需要再设置home属性了
• routes：定义名称和路由之间的映射关系，类型为Map<String, WidgetBuilder>

2.2 跳转传值

arguments传递数据。

_onPushTap(BuildContext context) {
  Navigator.of(context).pushNamed(HYDetailPage.routeName, arguments: "a home message of naned route");
}

HYDetailPage接受数据：
在build方法中ModalRoute.of(context)可以获取到传递的参数。

 Widget build(BuildContext context) {
    // 1.获取数据
    final message = ModalRoute.of(context).settings.arguments;
  }

2.3 路由钩子

onGenerateRoute，使用场景，假如我们有一个HYAboutPage，也希望在跳转时，传入对应的参数message，并且已经有一个对应的构造方法。这个时候我们可以使用onGenerateRoute的钩子函数：

• 当我们通过pushNamed进行跳转，但是对应的name没有在routes中有映射关系，那么就会执行onGenerateRoute钩子函数；
• 我们可以在该函数中，手动创建对应的Route进行返回；
• 该函数有一个参数RouteSettings，该类有两个常用的属性：
  name: 跳转的路径名称
  arguments：跳转时携带的参数

onGenerateRoute: (settings) {
  if (settings.name == "/about") {
    return MaterialPageRoute(
      builder: (ctx) {
        return HYAboutPage(settings.arguments);
      }
    );
  }
  returnnull;
}

2.4 onUnknownRoute

在路由不存在的时候，这个时候我们希望跳转到一个统一的错误页面。以防止flutter出现错误的情况。

• 未知页面/abc

  ListTile(
     onTap: () {
         print("我的收藏");
         Navigator.pushNamed(context, '/GHOrderListPage231231');//弹出错误页面
          },
         leading: Icon(Icons.collections_bookmark, color: Colors.red),
         title: Text("我的收藏"),
         ),)

• 创建错误提示页面

class UnknownPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("错误页面~"),
      ),
      body: Container(
        child: Center(
          child: Text("页面跳转错误~"),
        ),
      ),
    );
  }
}

• 设置onUnknownRoute路由

onUnknownRoute: (settings) {
  return MaterialPageRoute(
    builder: (ctx) {
      return UnknownPage();
    }
  );
},

结果如下图所示：

错误路由界面

image.png

image.png

image.png

image.png

获取 shared_preferences 实例
final prefs = await SharedPreferences.getInstance();
/// 设置值
prefs.setInt('counter', counter);
/// 获取值 
final counter = prefs.getInt('counter') ?? 0;}
///移除
prefs.remove('counter');

https://blog.csdn.net/shulianghan/article/details/119930138
7、lottie 动画

  Widget _lottie(String name, {required AnimationController controller}) {
    return Lottie.asset(
      'assets/lottie/$name',
      controller: controller,
      height: 25.h,
      fit: BoxFit.contain,
    );
  }

 Widget _navItem({
    required String key,
    required String iconName,
    required String label,
  }) {
    final logic = Get.find<VNavigationBarController>();
    return Expanded(
      child: Container(
        color: Colors.transparent,
        child: InkWell(
          onTap: () => logic.onTap(key),
          child: Column(
            children: [
              _lottie(
                iconName,
                controller: logic.controllers[key]!,
              ),
              Obx(
                () => AnimatedDefaultTextStyle(
                  duration: const Duration(milliseconds: 1000),
                  style: TextStyle(
                      color: logic.currentKey == key
                          ? CustomTheme.colorSchema.fontColor
                          : CustomTheme.colorSchema.neutral),
                  child: Text(
                    label,
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

8、flip_card翻转效果

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlipCard',
      theme: ThemeData.dark(),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  _renderBg() {
    return Container(
      decoration: BoxDecoration(color: const Color(0xFFFFFFFF)),
    );
  }

  _renderAppBar(context) {
    return MediaQuery.removePadding(
      context: context,
      removeBottom: true,
      child: AppBar(
        elevation: 0.0,
        backgroundColor: Color(0x00FFFFFF),
      ),
    );
  }

  _renderContent(context) {
    return Card(
      elevation: 0.0,
      margin: EdgeInsets.only(left: 32.0, right: 32.0, top: 20.0, bottom: 0.0),
      color: Color(0x00000000),
      child: FlipCard(
        direction: FlipDirection.HORIZONTAL,
        speed: 1000,
        onFlipDone: (status) {
          print(status);
        },
        front: Container(
          decoration: BoxDecoration(
            color: Color(0xFF006666),
            borderRadius: BorderRadius.all(Radius.circular(8.0)),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Front', style: Theme.of(context).textTheme.headline1),
              Text('Click here to flip back',
                  style: Theme.of(context).textTheme.bodyText1),
            ],
          ),
        ),
        back: Container(
          decoration: BoxDecoration(
            color: Color(0xFF006666),
            borderRadius: BorderRadius.all(Radius.circular(8.0)),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Back', style: Theme.of(context).textTheme.headline1),
              Text('Click here to flip front',
                  style: Theme.of(context).textTheme.bodyText1),
            ],
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FlipCard'),
      ),
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          _renderBg(),
          Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              // _renderAppBar(context),
              Expanded(
                flex: 4,
                child: _renderContent(context),
              ),
              Expanded(
                flex: 1,
                child: Container(),
              ),
            ],
          )
        ],
      ),
    );
  }

image.png

image.png