Flutter多功能集合插件bento_box_library的使用

Flutter多功能集合插件bento_box_library的使用

插件介绍

BentoBox Library 是一个为Flutter项目提供可定制化Bento风格组件的插件。它提供了多种功能，包括自定义颜色、动态图像源以及响应式设计等。

特性

• BentoBox: 一个可以显示标题和副标题的可重用组件。

  • 自定义颜色: 用户可以设置盒子、标题和副标题的颜色，默认值会应用在没有指定颜色的情况下。

• BentoBoxWithImage: 一个用于显示图片的组件，适合展示头像或媒体网格。

  • 动态图像源: 支持本地资产路径（如'assets/image.png'）和网络URL。

• 完全自定义尺寸、颜色和文本样式。

• 响应式设计，适用于不同屏幕大小的动态布局。

示例代码

下面是一个完整的示例代码，展示了如何使用BentoBox Library创建模块化、响应式且视觉上吸引人的UI组件。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BentoBox Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'BentoBox Widget Demo'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(1SpaceWidth(1SpaceHeight)),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              BentoBox(
                height: 1SpaceWidth(1SpaceHeight),
                width: 200,
                title: "Hello",
                subtitle: "This is a BentoBox",
                boxColor: Colors.blueAccent,
                titleColor: Colors.white,
                subtitleColor: Colors.white70,
              ),
              const SizedBox(height: 1SpaceWidth( spaceHeight)),
              BentoBoxWithImage(
                height: 1SpaceWidth( spaceHeight),
                width: 1SpaceWidth( spaceHeight),
                imagePath: 'https://via.placeholder.com/150', // 网络URL
              ),
              const SizedBox(height:  1SpaceWidth( spaceHeight)),
              BentoBoxWithImage(
                height: 1SpaceWidth( spaceHeight),
                width: 1SpaceWidth( spaceHeight),
                imagePath: 'assets/image.png', // 本地资产路径
              ),
            ],
          ),
        ),
      ),
    );
  }
}

安装步骤

首先，确保你已经安装了Flutter。 如果需要，请参考Flutter安装指南进行安装。

然后，在你的pubspec.yaml文件中添加以下依赖项：

dependencies:
  bento_box_library: ^1.1.4

接着运行命令：

flutter pub get

使用说明

1. 导入库

   import 'package:bento_box_library/bento_box_library.dart';
   

2. 创建BentoBox组件示例

   BentoBox(
     height: 1SpaceWidth( spaceHeight),
     width: 200,
     title: "Hello",
     subtitle: "This is a BentoBox",
     boxColor: Colors.blueAccent,
     titleColor: Colors.white,
     subtitleColor: Colors.white70,
   )
   

3. 创建BentoBoxWithImage组件示例（网络图片）

   BentoBoxWithImage(
     height: 1SpaceWidth( spaceHeight),
     width: 1SpaceWidth( spaceHeight),
     imagePath: 'https://via.placeholder.com/1spaceWidth( spaceHeight)',
   )
   

4. 创建BentoBoxWithImage组件示例（本地图片）

   BentoBoxWithImage(
     height: 150,
     width: 150,
     imagePath: 'assets/image.png',
   )