Flutter轮胎管理或相关功能插件flutter_tyre的使用

简介

flutter_tyre 是一个为方便开发 Flutter 应用而设计的自定义控件库。它提供了多种预定义的 UI 组件，帮助开发者快速构建美观且功能丰富的应用程序。

特性

• 提供了丰富的自定义小部件（Widgets），可以轻松实现各种复杂的 UI。
• 支持灵活配置，满足不同场景的需求。
• 提供了多种类型的小部件，如文本、卡片、列表等。

使用步骤

1. 添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_tyre: ^1.0.0

然后运行以下命令以安装依赖：

flutter pub get

2. 导入包

在需要使用的文件中导入 flutter_tyre 包：

import 'package:flutter_tyre/flutter_tyre.dart';

3. 使用示例

以下是一个完整的示例代码，展示了如何使用 flutter_tyre 中的组件来构建一个简单的应用界面。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_tyre/flutter_tyre.dart';

// 模拟数据模型
class CategoryModel {
  final String name;
  final Color boxColor;

  CategoryModel(this.name, this.boxColor);

  static List<CategoryModel> getCategories() {
    return [
      CategoryModel("健身", Colors.blue),
      CategoryModel("瑜伽", Colors.green),
      CategoryModel("跑步", Colors.orange),
    ];
  }
}

class DietModel {
  final String name;
  final String calorie;
  final Color boxColor;

  DietModel(this.name, this.calorie, this.boxColor);

  static List<DietModel> getDiets() {
    return [
      DietModel("健康饮食", "500 kcal", Colors.purple),
      DietModel("低碳饮食", "600 kcal", Colors.red),
      DietModel("素食主义", "450 kcal", Colors.teal),
    ];
  }
}

class PopularDietsModel {
  final String name;
  final Color boxColor;

  PopularDietsModel(this.name, this.boxColor);

  static List<PopularDietsModel> getPopularDiets() {
    return [
      PopularDietsModel("地中海饮食", Colors.pink),
      PopularDietsModel("生酮饮食", Colors.indigo),
      PopularDietsModel("断食法", Colors.brown),
    ];
  }
}

// 主页面
class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List<CategoryModel> categories = [];
  List<DietModel> diets = [];
  List<PopularDietsModel> popularDiets = [];

  @override
  void initState() {
    super.initState();
    categories = CategoryModel.getCategories();
    diets = DietModel.getDiets();
    popularDiets = PopularDietsModel.getPopularDiets();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBarWidget(
        title: '轮胎管理应用',
        action: IconButton(
          onPressed: () {},
          icon: const Icon(Icons.settings),
        ),
      ),
      body: ListView(
        children: [
          // 标题
          const TextTitle(
            title: '欢迎使用轮胎管理应用',
          ),
          const TextBody(
            title: '这是我们的功能介绍',
          ),
          // 水平卡片列表
          CategoryHorizontalWidget(
            title: "推荐饮食",
            itemHeight: 240,
            datas: diets,
            childBuilder: (data) => CardMediumImageTwoTitleOneButtonWidget(
              backgroundColor: data.boxColor.withOpacity(0.4),
              image: const Icon(Icons.fastfood),
              title: data.name,
              subTitle: data.calorie,
              onTapped: () {
                print(data.name);
              },
            ),
          ),
          const SizedBox(height: 40),
          // 垂直卡片列表
          CategoryVerticalWidget(
            title: "分类浏览",
            datas: categories,
            childBuilder: (data) => CardSmallImageOneTitleWidget(
              backgroundColor: data.boxColor.withOpacity(0.7),
              image: const Icon(Icons.category),
              title: data.name,
              onTapped: () {
                print(data.name);
              },
            ),
          ),
          const SizedBox(height: 40),
          // 列表视图
          CategoryVerticalWidget(
            title: "热门推荐",
            datas: popularDiets,
            childBuilder: (data) => ListImageTwoTitleOneButtonWidget(
              title: '热门推荐',
              image: const Icon(Icons.star),
              subTitle: data.name,
              nextButton: const Icon(Icons.arrow_forward),
            ),
          )
        ],
      ),
    );
  }
}

代码说明

1. AppBarWidget

用于创建顶部导航栏，支持设置标题和右侧按钮。

appBar: AppBarWidget(
  title: '轮胎管理应用',
  action: IconButton(
    onPressed: () {},
    icon: const Icon(Icons.settings),
  ),
),

2. TextTitle 和 TextBody

用于显示大标题和正文内容。

const TextTitle(
  title: '欢迎使用轮胎管理应用',
),
const TextBody(
  title: '这是我们的功能介绍',
),

3. CategoryHorizontalWidget

用于水平排列的卡片列表，支持动态数据绑定。

CategoryHorizontalWidget(
  title: "推荐饮食",
  itemHeight: 240,
  datas: diets,
  childBuilder: (data) => CardMediumImageTwoTitleOneButtonWidget(
    backgroundColor: data.boxColor.withOpacity(0.4),
    image: const Icon(Icons.fastfood),
    title: data.name,
    subTitle: data.calorie,
    onTapped: () {
      print(data.name);
    },
  ),
),

4. CardMediumImageTwoTitleOneButtonWidget

用于显示带有图片和两个标题的卡片，并支持点击事件。

CardMediumImageTwoTitleOneButtonWidget(
  backgroundColor: data.boxColor.withOpacity(0.4),
  image: const Icon(Icons.fastfood),
  title: data.name,
  subTitle: data.calorie,
  onTapped: () {
    print(data.name);
  },
),

5. CardSmallImageOneTitleWidget

用于显示小型卡片，带有一个标题和图标。

CardSmallImageOneTitleWidget(
  backgroundColor: data.boxColor.withOpacity(0.7),
  image: const Icon(Icons.category),
  title: data.name,
  onTapped: () {
    print(data.name);
  },
),

6. ListImageTwoTitleOneButtonWidget

用于显示带有图片、两个标题和按钮的列表项。

ListImageTwoTitleOneButtonWidget(
  title: '热门推荐',
  image: const Icon(Icons.star),
  subTitle: data.name,
  nextButton: const Icon(Icons.arrow_forward),
),