Flutter基础功能扩展插件foundation_flutter的使用

foundation_flutter 是一个用于扩展 Flutter 基础功能的包。通过这个包，你可以轻松地添加导航栏、主题切换等功能到你的 Flutter 应用程序中。

获取开始

本项目是一个 Dart 包，可以包含可以在多个 Flutter 或 Dart 项目的库模块中共享的代码。

要开始使用 Flutter，你可以查看我们的在线文档，其中包括教程、示例、移动开发指南和完整的 API 参考。

示例代码

以下是一个使用 foundation_flutter 的完整示例代码：

import 'package:flutter/material.dart';
import 'package:foundation_flutter/foundation.dart';

// 定义一个导航栏
final NavBar navBar = NavBar();

// 定义第一个页面的导航项
final Nav screen1Nav = Nav('Page 1', Icons.account_circle, navBar);

// 定义第三个页面的数据模型
class PageThreeData {
  final String message;

  PageThreeData(this.message);
}

// 定义第一个页面
final Screen screen0 = Screen(
  name: "Begin",
  create: (state) => ElevatedButton(
    onPressed: () => application.pushScreen(screen1),
    child: Text('Begin'),
  ),
);

// 定义第二个页面
final Screen screen1 = Screen(
  name: "Page 1",
  includeSafeArea: false,
  nav: screen1Nav,
  create: (state) => PageOne(),
);

// 定义第三个页面
final Screen screen2 = Screen(
  name: "Page 2",
  nav: Nav('Page 2', Icons.settings, navBar),
  create: (state) => PageTwo(),
);

// 定义带类型参数的页面
final TypedScreen<PageThreeData> screen3 = TypedScreen(
  name: "Page 3",
  defaultValue: PageThreeData('Default!'),
  nav: Nav('Page 3', Icons.nature, navBar),
  createTyped: (state) => PageThree(data: state.value),
);

// 定义详情页面
final Screen details = Screen(
  name: "Details",
  parent: screen2,
  create: (state) => DetailsPage(),
);

// 定义应用程序
final Application<AppState, MyTheme> application = Application(
  state: AppState(),
  title: 'My Application Test',
  initialTheme: MyTheme.light,
  screens: [screen0, screen1, screen2, details, screen3],
);

void main() {
  runApp(application);
}

class AppState {}

class PageOne extends StatefulWidget {
  @override
  State createState() => PageOneState();
}

class PageOneState extends State<PageOne> with AutomaticKeepAliveClientMixin<PageOne> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    super.build(context);

    print("***** REBUILDING PAGE 1");
    return Container(
        width: double.infinity,
        color: Colors.white,
        child: Column(
          children: [
            Padding(
                child: Text('Count: $_counter', style: Theme.of(context).textTheme.headline4),
                padding: EdgeInsets.only(top: 20.0)),
            ElevatedButton(onPressed: increment, child: Text("Increment")),
            ElevatedButton(
                onPressed: () => application.pushScreen(screen0),
                child: Text('Go to Begin'))
          ],
        ));
  }

  void increment() => setState(() {
    _counter++;
    application.setNavBadge(screen1Nav, _counter);
  });

  @override
  bool get wantKeepAlive => true;
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        alignment: Alignment.center,
        child: Column(children: [
          ElevatedButton(
            onPressed: () => application.pushScreen(details),
            child: Text('Don\'t Click me'),
            style: application.theme.specialButton,
          ),
          ElevatedButton(
            onPressed: () => application
                .push(screen3.createTypedState(PageThreeData('Hello, World!'))),
            child: Text('Go to Page 3'),
          ),
          ElevatedButton(
            onPressed: () => application.theme = MyTheme.dark,
            child: Text('Change Theme'),
          ),
        ]));
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        color: Colors.white,
        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          Text('jk, i\'m not evil, you can click me'),
          ElevatedButton(
            onPressed: () => application.back(),
            child: Text('Click me!'),
          ),
        ]),
      ),
    );
  }
}

class PageThree extends StatelessWidget {
  final PageThreeData data;

  const PageThree({Key? key, required this.data}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment.center,
      child: Text('Three: ${data.message}'),
    );
  }
}

class MyTheme extends AbstractTheme {
  final Color bg1;
  final Color accent1;
  final bool isDark;
  final ButtonStyle specialButton;

  MyTheme({required this.bg1, required this.accent1, required this.isDark})
      : specialButton = ButtonStyle(
            foregroundColor: MaterialStateProperty.all(accent1),
            backgroundColor: MaterialStateProperty.all(bg1));

  @override
  ThemeData data() {
    final TextTheme text =
        (isDark ? ThemeData.dark() : ThemeData.light()).textTheme;
    final Color textColor = text.bodyText1?.color ?? Colors.white;
    final ColorScheme color = ColorScheme(
        brightness: isDark ? Brightness.dark : Brightness.light,
        primary: accent1,
        primaryVariant: accent1,
        secondary: accent1,
        secondaryVariant: accent1,
        background: bg1,
        surface: bg1,
        onBackground: textColor,
        onSurface: textColor,
        onError: Colors.white,
        onPrimary: Colors.white,
        onSecondary: Colors.white,
        error: Colors.red.shade400);
    final ThemeData td = ThemeData(primaryColor: accent1, colorScheme: color);
    return td;
  }

  @override
  ThemeMode mode() => isDark ? ThemeMode.dark : ThemeMode.light;

  static final MyTheme light =
      new MyTheme(bg1: Colors.white, accent1: Colors.blueAccent, isDark: false);
  static final MyTheme dark = new MyTheme(
      bg1: Colors.black26, accent1: Colors.greenAccent, isDark: false);
}

以上代码展示了如何使用 foundation_flutter 来创建具有导航栏、主题切换和多页面管理的应用程序。通过这些功能，你可以更方便地构建复杂的 Flutter 应用程序。