Flutter自定义容器插件adipoli

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

AdiPoli 容器包允许你在 Flutter 项目中添加一个漂亮的渐变容器。

安装

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

dependencies:
  adipoli_container: ^0.0.1

导入包：

import 'package:adipoli_container/adipoli_container.dart';

示例

你可以修改许多属性，例如：

height
padding
subtitle
colorStart
title
colorEnd
width
radius

示例代码

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: AdiPoliContainer(
          height: 100,
          width: 400,
          radius: 20,
          title: Text('Hello World',
            style: TextStyle(
              color: Colors.blue,
              fontSize: 20,
              fontWeight: FontWeight.w800
            ),
          ),
          subtitle: Text('这是一个新包',
            style: TextStyle(
              color: Colors.blue,
              fontSize: 20,
              fontWeight: FontWeight.w800
            ),
          ),
          colorStart: Colors.white,
          colorEnd: Colors.black,
          padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20)
        ),
      ),
    );
  }
}

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

zlyuanteng 1楼

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

adipoli_container 是一个自定义的 Flutter 容器插件，它提供了一些额外的功能和样式，使得你可以更灵活地定制容器的外观和行为。下面是如何使用 adipoli_container 插件的步骤：

1. 添加依赖

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

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

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

2. 导入插件

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

import 'package:adipoli_container/adipoli_container.dart';

3. 使用 `AdipoliContainer`

AdipoliContainer 是一个自定义的容器组件，你可以像使用普通的 Container 一样使用它，但它提供了一些额外的功能和样式。

基本用法

AdipoliContainer(
  width: 200,
  height: 200,
  color: Colors.blue,
  child: Center(
    child: Text(
      'Hello, Adipoli!',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

自定义边框

AdipoliContainer(
  width: 200,
  height: 200,
  color: Colors.green,
  border: Border.all(
    color: Colors.red,
    width: 2.0,
  ),
  child: Center(
    child: Text(
      'Custom Border',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

圆角

AdipoliContainer(
  width: 200,
  height: 200,
  color: Colors.orange,
  borderRadius: BorderRadius.circular(20.0),
  child: Center(
    child: Text(
      'Rounded Corners',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

阴影

AdipoliContainer(
  width: 200,
  height: 200,
  color: Colors.purple,
  boxShadow: [
    BoxShadow(
      color: Colors.black.withOpacity(0.5),
      spreadRadius: 5,
      blurRadius: 7,
      offset: Offset(0, 3), // changes position of shadow
    ),
  ],
  child: Center(
    child: Text(
      'Shadow Effect',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

渐变背景

AdipoliContainer(
  width: 200,
  height: 200,
  gradient: LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [Colors.blue, Colors.green],
  ),
  child: Center(
    child: Text(
      'Gradient Background',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

4. 其他功能

AdipoliContainer 还支持其他一些自定义功能，比如 padding、margin、alignment 等，你可以根据需要进行配置。

AdipoliContainer(
  width: 200,
  height: 200,
  color: Colors.teal,
  padding: EdgeInsets.all(20.0),
  margin: EdgeInsets.all(10.0),
  alignment: Alignment.center,
  child: Text(
    'Custom Padding & Margin',
    style: TextStyle(color: Colors.white),
  ),
)

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