Flutter自定义容器插件trendy_container的使用

Trendy container 包允许你在你的 Flutter 应用程序中添加一个漂亮的渐变容器。就像即插即用一样。

安装

1. 将最新版本的包添加到你的 pubspec.yaml 文件（然后运行 dart pub get）：

dependencies:
  trendy_container: ^0.0.1

1. 导入包并在你的 Flutter 应用程序中使用它：

import 'package:trendy_container/trendy_container.dart';

示例

你可以修改许多属性：

• height
• width
• title
• subtitle
• gradient (颜色1和颜色2)
• centerTitle
• titleTextStyle
• subtitleTextStyle
• padding
• isCircle
• isRectangle

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 TrendyContainer 插件：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: HomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 第一个渐变矩形容器
            TrendyContainer(
              title: '这是标题',
              subTitle: '这是副标题',
              titleTextStyle: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
              subtitleTextStyle: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
              isRectangle: true,
              padding: EdgeInsets.all(10),
              height: 150,
              width: 300,
              centerTitle: true,
              color1: Colors.red,
              color2: Colors.orange,
            ),
            SizedBox(
              height: 50,
            ),
            // 第二个渐变矩形容器
            TrendyContainer(
              title: '这是标题',
              subTitle: '这是副标题',
              titleTextStyle: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
              subtitleTextStyle: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
              padding: EdgeInsets.all(10),
              height: 150,
              width: 300,
              centerTitle: true,
              color1: Colors.green,
              color2: Colors.greenAccent,
            ),
            SizedBox(
              height: 50,
            ),
            // 圆形渐变容器
            TrendyContainer(
              title: '这是标题',
              subTitle: '这是副标题',
              titleTextStyle: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
              subtitleTextStyle: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
              padding: EdgeInsets.all(10),
              height: 180,
              width: 300,
              isCircle: true,
              centerTitle: true,
              color1: Colors.blueAccent,
              color2: Colors.lightBlue,
            ),
          ],
        ),
      ),
    );
  }
}