Flutter家居风格界面插件fastyle_home的使用

Flutter家居风格界面插件fastyle_home的使用

开始使用

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

对于Flutter的新手来说，可以参考我们的在线文档，该文档提供了教程、示例、移动开发指导以及完整的API参考。

示例代码

以下是使用fastyle_home插件的一个完整示例：

// Flutter imports:
import 'package:flutter/material.dart';

// Package imports:
import 'package:fastyle_core/fastyle_core.dart';
import 'package:fastyle_home/fastyle_home.dart';
import 'package:go_router/go_router.dart';
import 'package:t_helpers/helpers.dart';
import 'package:fastyle_buttons/fastyle_buttons.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  FastHomeGraphType _graphType = FastHomeGraphType.line;

  @override
  Widget build(BuildContext context) {
    return FastApp(
      lightTheme: FastTheme.light.indigo,
      darkTheme: FastTheme.dark.indigo,
      routesForMediaType: (mediaType) => [
        GoRoute(
          path: '/',
          builder: (_, __) => FastHomeGraphPage(
            titleText: '欢迎！',
            subtitleText: '祝你今天愉快！',
            contentPadding: kFastEdgeInsets16,
            leading: const IconButton(
              onPressed: noop,
              icon: Icon(Icons.settings),
            ),
            actions: const [
              IconButton(
                onPressed: noop,
                icon: Icon(Icons.search),
              ),
            ],
            floatingActionButton: const Icon(Icons.settings),
            appBarExpandedHeight: 250,
            graphType: _graphType,
            children: [
              FastRaisedButton2(
                labelText: '线形图',
                onTap: () {
                  setState(() {
                    _graphType = FastHomeGraphType.line;
                  });
                },
              ),
              FastRaisedButton2(
                labelText: '饼状图',
                onTap: () {
                  setState(() {
                    _graphType = FastHomeGraphType.pie;
                  });
                },
              ),
              FastRaisedButton2(
                labelText: '柱状图',
                onTap: () {
                  setState(() {
                    _graphType = FastHomeGraphType.bar;
                  });
                },
              ),
            ],
          ),
        ),
      ],
    );
  }
}

代码解释

• 导入依赖：

  import 'package:fastyle_home/fastyle_home.dart'; // 导入fastyle_home包
  

• 定义主应用类：

  class MyApp extends StatefulWidget {
    const MyApp({super.key});
  
    @override
    MyAppState createState() => MyAppState();
  }
  

• 定义状态管理类：

  class MyAppState extends State<MyApp> {
    FastHomeGraphType _graphType = FastHomeGraphType.line; // 初始图表类型为线形图
  
    @override
    Widget build(BuildContext context) {
      return FastApp(
        lightTheme: FastTheme.light.indigo,
        darkTheme: FastTheme.dark.indigo,
        routesForMediaType: (mediaType) => [
          GoRoute(
            path: '/',
            builder: (_, __) => FastHomeGraphPage(
              titleText: '欢迎！',
              subtitleText: '祝你今天愉快！',
              contentPadding: kFastEdgeInsets16,
              leading: const IconButton(
                onPressed: noop,
                icon: Icon(Icons.settings),
              ),
              actions: const [
                IconButton(
                  onPressed: noop,
                  icon: Icon(Icons.search),
                ),
              ],
              floatingActionButton: const Icon(Icons.settings),
              appBarExpandedHeight: 250,
              graphType: _graphType,
              children: [
                FastRaisedButton2(
                  labelText: '线形图',
                  onTap: () {
                    setState(() {
                      _graphType = FastHomeGraphType.line;
                    });
                  },
                ),
                FastRaisedButton2(
                  labelText: '饼状图',
                  onTap: () {
                    setState(() {
                      _graphType = FastHomeGraphType.pie;
                    });
                  },
                ),
                FastRaisedButton2(
                  labelText: '柱状图',
                  onTap: () {
                    setState(() {
                      _graphType = FastHomeGraphType.bar;
                    });
                  },
                ),
              ],
            ),
          ),
        ],
      );
    }
  }