Flutter功能扩展插件fl_extended的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter功能扩展插件fl_extended的使用

为Flutter添加了一些扩展组件和方法，并简化了路由功能.

运行Example查看UI组件

运行以下链接查看示例应用的UI组件：

https://wayaer.github.io/fl_extended/example/app/web/index.html#/

初始化 navigatorKey 两种方式

  1. 设置你自己的 navigatorKey
void setGlobalNavigatorKey() {
  FlExtended().scaffoldMessengerKey = scaffoldMessengerKey;
  FlExtended().navigatorKey = navigatorKey;
}

/// 使用自己的 MaterialApp
class _AppState extends ExtendedState<_App> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        navigatorKey: FlExtended().globalNavigatorKey,
        scaffoldMessengerKey: FlExtended().scaffoldMessengerKey,
        title: 'Fl Extended',
        home: _Home());
  }
}
  1. 使用 ExtendedPopScope 可自动管理 android 物理返回键 关闭 loading 等 Overlay 弹出框

路由使用

void func() {
  /// push
  push(Widget());

  /// pushReplacement
  pushReplacement(Widget());

  /// pushAndRemoveUntil
  pushAndRemoveUntil(Widget());

  /// maybePop
  maybePop();

  /// pop
  pop();

  /// popUntil
  popUntil();
}

overlay

void func() {

  /// ******** overlay ********///
  ExtendedOverlayEntry? overlay = Widget().showOverlay();
  overlay?.remove();

  /// ******** toast ********///
  /// 设置全局Toast配置
  FlExtended().toastOptions = ToastOptions.extendeded(
      animationStyle: FlAnimationStyle.verticalHunting,
      textStyle: const TextStyle(color: Colors.white),
      onModalTap: () {
        log('onModalTap');
      },
      onToastTap: () {
        log('onToastTap');
      },
      foregroundColor: Colors.grey,
      backgroundColor: Colors.red.withValues(alpha: 0.3),
      constraints: const BoxConstraints(maxWidth: 250),
      color: Colors.amber,
      builder: (BuildContext context, ToastContent content) {
        return Universal(mainAxisSize: MainAxisSize.min, children: [
          if (content.iconStyle != null)
            Icon(content.iconStyle!.icon, color: content.color),
          Text(content.text,
              textAlign: TextAlign.center,
              style: TextStyle(color: content.color))
        ]);
      });

  /// toast
  showToast();
  Toast().show();

  /// ******** loading ********///
  /// 设置全局Loading配置
  FlExtended().loadingingOptions = LoadingOptions(
      backgroundColor: Colors.red.withValues(alpha: 0.1),
      foregroundColor: Colors.yellow,
      elevation: 22,
      padding: const EdgeInsets.all(10),
      builder: (_, LoadingContent content) {
        if (content.style != null) return null;
        return const Padding(
            padding: EdgeInsets.all(10),
            child: BText('全局设置loading', fontSize: 20));
      },
      onLoadingTap: () {
        log('onLoadingTap');
        closeLoading();
      },
      constraints: const BoxConstraints(maxWidth: 250),
      borderRadius: BorderRadius.circular(10),
      onModalTap: () {
        log('onModalTap');
        closeLoading();
      });

  /// loading
  showLoading();

  /// close
  closeLoading();
}

popup

void func() {
  FlExtended().dialogOptions =
  const DialogOptions(fromStyle: PopupFromStyle.fromTop);

  /// showGeneralDialog
  Widget().popupDialog();

  /// showCupertinoDialog
  Widget().popupCupertinoDialog();

  /// showDialog
  Widget().popupMaterialDialog();

  /// showModalBottomSheet
  Widget().popupBottomSheet();

  /// showCupertinoModalPopup
  Widget().popupCupertinoModal();
}

更多关于Flutter功能扩展插件fl_extended的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter功能扩展插件fl_extended的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter开发中，fl_extended 是一个功能丰富的扩展插件集合，它提供了许多额外的功能和组件，以增强Flutter应用的开发体验。虽然fl_extended并不是官方插件，但假设它类似于一些流行的扩展库，我们可以展示如何使用类似的扩展功能，通过一些示例代码来说明其可能的用法。

请注意，由于fl_extended的具体实现和API可能随时间变化，以下代码是基于假设的API设计。如果你使用的是具体的fl_extended库，请参考其官方文档和最新版本。

示例1：使用扩展的日期选择器

假设fl_extended提供了一个增强的日期选择器组件，可以这样使用：

import 'package:flutter/material.dart';
import 'package:fl_extended/fl_extended.dart'; // 假设的包导入路径

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Extended Demo'),
        ),
        body: Center(
          child: ExtendedDatePicker(
            onDateChanged: (DateTime date) {
              print('Selected date: $date');
            },
            initialDate: DateTime.now(),
            firstDate: DateTime(2000),
            lastDate: DateTime(2100),
          ),
        ),
      ),
    );
  }
}

示例2：使用扩展的表格组件

假设fl_extended还提供了一个易于使用的表格组件：

import 'package:flutter/material.dart';
import 'package:fl_extended/fl_extended.dart'; // 假设的包导入路径

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Extended Table Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ExtendedTable(
            columns: [
              ExtendedTableColumn(title: 'Name', data: ['Alice', 'Bob', 'Charlie']),
              ExtendedTableColumn(title: 'Age', data: [25, 30, 35]),
            ],
            headerStyle: TextStyle(fontWeight: FontWeight.bold),
            cellStyle: TextStyle(color: Colors.grey[600]),
          ),
        ),
      ),
    );
  }
}

示例3：使用扩展的底部导航栏

假设fl_extended提供了一个增强的底部导航栏组件：

import 'package:flutter/material.dart';
import 'package:fl_extended/fl_extended.dart'; // 假设的包导入路径

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        bottomNavigationBar: ExtendedBottomNavigationBar(
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              label: 'Search',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.library_books),
              label: 'Library',
            ),
          ],
        ),
        body: Center(
          child: Text('You have selected: $_selectedIndex'),
        ),
      ),
    );
  }
}

结论

以上代码示例展示了如何使用假设的fl_extended插件中的几个扩展组件。这些组件包括日期选择器、表格和底部导航栏。在实际使用中，你需要根据fl_extended的具体文档和API来调整代码。如果你正在寻找特定的功能扩展，建议查阅该库的官方文档或GitHub仓库以获取最新的信息和示例代码。

回到顶部