Flutter容器组件插件flutter_awesome_containers的使用

Flutter Awesome container package 用于在您的 Flutter 应用程序中创建具有渐变背景的容器，并包含自定义子部件。

安装

在 pubspec.yaml 文件中添加最新版本的包（然后运行 dart pub get）：

dependencies:
  flutter_awesome_containers: ^0.0.1

导入包并在您的 Flutter 应用程序中使用它：

import 'package:flutter_awesome_containers/flutter_awesome_containers.dart';

示例

以下是一个完整的示例代码，展示了如何使用 flutter_awesome_containers 插件来创建一个带有渐变背景的容器，并在其中放置自定义子部件。

class FlutterAwesomeContainer extends StatefulWidget {
  [@override](/user/override)
  State<FlutterAwesomeContainer> createState() => _FlutterAwesomeContainerState();
}

class _FlutterAwesomeContainerState extends State<FlutterAwesomeContainer> {

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: FlutterFlutterAwesomeContainer(
            // 设置渐变颜色
            colorOne: Colors.teal[900], // 第一种颜色
            colorTwo: Colors.tealAccent, // 第二种颜色
            onTap: () {
              // 点击事件回调
              print("OnTap Event Fired");
            },
            child: Center(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  // 自定义子部件
                  Text("Hello world", style: TextStyle(color: Colors.white, fontSize: 20)),
                  Text("This is your custom child container", style: TextStyle(color: Colors.white, fontSize: 14)),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

zlyuanteng 1楼•12 天前

更多关于Flutter容器组件插件flutter_awesome_containers的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

flutter_awesome_containers 是一个 Flutter 插件，提供了一些预定义的、高度可定制的容器组件，可以帮助开发者快速构建漂亮的 UI。虽然这个插件可能不是官方维护的，但它通常包含一些常见的容器样式，如卡片、圆角容器、阴影容器等。

安装

首先，你需要在 pubspec.yaml 文件中添加 flutter_awesome_containers 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_awesome_containers: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

使用示例

以下是一些常见的使用示例：

1. 基本容器

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Awesome Containers'),
      ),
      body: Center(
        child: AwesomeContainer(
          width: 200,
          height: 200,
          color: Colors.blue,
          borderRadius: BorderRadius.circular(20),
          child: Center(
            child: Text(
              'Hello, World!',
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
          ),
        ),
      ),
    );
  }
}

2. 带阴影的容器

AwesomeContainer(
  width: 200,
  height: 200,
  color: Colors.white,
  borderRadius: BorderRadius.circular(20),
  shadowColor: Colors.black.withOpacity(0.2),
  shadowBlurRadius: 10,
  shadowSpreadRadius: 2,
  child: Center(
    child: Text(
      'Shadow Container',
      style: TextStyle(color: Colors.black, fontSize: 20),
    ),
  ),
)

3. 渐变背景容器

AwesomeContainer(
  width: 200,
  height: 200,
  gradient: LinearGradient(
    colors: [Colors.blue, Colors.purple],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  borderRadius: BorderRadius.circular(20),
  child: Center(
    child: Text(
      'Gradient Container',
      style: TextStyle(color: Colors.white, fontSize: 20),
    ),
  ),
)

4. 带边框的容器

AwesomeContainer(
  width: 200,
  height: 200,
  color: Colors.white,
  borderRadius: BorderRadius.circular(20),
  borderColor: Colors.blue,
  borderWidth: 2,
  child: Center(
    child: Text(
      'Bordered Container',
      style: TextStyle(color: Colors.black, fontSize: 20),
    ),
  ),
)