Flutter容器创建与管理插件container_made的使用

Flutter容器创建与管理插件container_made的使用

描述

这个插件提供了一个已经制作好的容器，你可以在其中添加两种颜色作为渐变色、标题和副标题。

特性

在项目中，有一个自定义的容器，只需添加一些细节即可使用。

已经制作好的容器

这个自定义容器包允许你在你的Flutter应用中添加一个漂亮的渐变容器。

安装

  1. 在pubspec.yaml文件中添加插件的最新版本（然后运行dart pub get）：
dependencies:
  container_made : ^0.0.1
  1. 导入插件并在你的Flutter应用中使用它：
import 'package:container_made/container_made.dart';

示例

你可以修改许多属性：

  • height
  • width
  • title
  • subtitle
  • gradient（包含color1和color2）

开始使用

任何时候你想使用自定义容器时都可以开始。

使用方法

在插件中已经有示例：

class UniqueContainer extends StatelessWidget {
  const UniqueContainer({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: ContainerMade(
          title: 'Hello World',
          subtitle: "This is new Package",
          color1: Colors.white,
          color2: Colors.black,
        ),
      ),
    );
  }
}

更多关于Flutter容器创建与管理插件container_made的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


container_made 是一个用于简化 Flutter 中容器创建与管理的插件。它提供了一种更简洁的方式来创建和管理各种类型的容器，如 Container、Padding、Margin、BoxDecoration 等。以下是使用 container_made 插件的基本步骤和示例。

1. 添加依赖

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

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

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 container_made 插件：

import 'package:container_made/container_made.dart';

3. 使用 container_made 创建容器

container_made 提供了多种方法来创建和管理容器。以下是一些常见的使用示例：

3.1 创建一个简单的容器

ContainerMade().simpleContainer(
  width: 100,
  height: 100,
  color: Colors.blue,
);

3.2 创建一个带有圆角的容器

ContainerMade().roundedContainer(
  width: 100,
  height: 100,
  color: Colors.red,
  borderRadius: BorderRadius.circular(10),
);

3.3 创建一个带有阴影的容器

ContainerMade().shadowedContainer(
  width: 100,
  height: 100,
  color: Colors.green,
  shadow: BoxShadow(
    color: Colors.black.withOpacity(0.5),
    spreadRadius: 5,
    blurRadius: 7,
    offset: Offset(0, 3),
  ),
);

3.4 创建一个带有边框的容器

ContainerMade().borderedContainer(
  width: 100,
  height: 100,
  color: Colors.yellow,
  border: Border.all(
    color: Colors.black,
    width: 2,
  ),
);

3.5 创建一个带有渐变背景的容器

ContainerMade().gradientContainer(
  width: 100,
  height: 100,
  gradient: LinearGradient(
    colors: [Colors.blue, Colors.green],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
);

4. 组合使用

你可以将多个属性组合在一起，创建一个复杂的容器：

ContainerMade().complexContainer(
  width: 200,
  height: 200,
  color: Colors.purple,
  borderRadius: BorderRadius.circular(20),
  border: Border.all(
    color: Colors.black,
    width: 2,
  ),
  shadow: BoxShadow(
    color: Colors.black.withOpacity(0.5),
    spreadRadius: 5,
    blurRadius: 7,
    offset: Offset(0, 3),
  ),
  gradient: LinearGradient(
    colors: [Colors.purple, Colors.pink],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  child: Center(
    child: Text(
      'Hello, Flutter!',
      style: TextStyle(
        color: Colors.white,
        fontSize: 20,
      ),
    ),
  ),
);
回到顶部