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

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

本插件提供了更灵活的设计，可以让你自定义容器。以下是该插件的主要属性及其用法。

属性

  • double? width; // 容器宽度
  • double? height; // 容器高度
  • child; // 容器内的子组件
  • Alignment? alignment; // 子组件在容器内的对齐方式
  • BoxDecoration? boxDecoration; // 容器装饰
  • EdgeInsetsGeometry? margin; // 容器外边距
  • EdgeInsetsGeometry? padding; // 容器内边距
  • double borderRadius; // 圆角半径
  • bool isBoxShadow; // 是否添加阴影效果
  • bool isBoxDecoration; // 是否使用装饰
  • Color containerColor; // 容器背景颜色
  • Color boxShadowColor; // 阴影颜色

使用示例

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Soft Container 示例'),
        ),
        body: Center(
          child: SoftContainer(
            width: 200,
            height: 150,
            alignment: Alignment.center,
            borderRadius: 10,
            isBoxShadow: true,
            boxShadowColor: Colors.grey,
            containerColor: Colors.blue,
            padding: EdgeInsets.all(10),
            child: Text(
              'Hello, Soft Container!',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

代码解释

  1. 导入必要的库:

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

  2. 创建主应用类:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Soft Container 示例'),
        ),
        body: Center(
          child: SoftContainer(
            width: 200,
            height: 150,
            alignment: Alignment.center,
            borderRadius: 10,
            isBoxShadow: true,
            boxShadowColor: Colors.grey,
            containerColor: Colors.blue,
            padding: EdgeInsets.all(10),
            child: Text(
              'Hello, Soft Container!',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


soft_container 是一个用于 Flutter 的自定义容器插件，它可以创建具有软阴影效果的容器。这种效果通常用于创建具有柔和边缘的卡片或按钮，使 UI 看起来更加现代和美观。

安装 soft_container 插件

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

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

然后运行 flutter pub get 来安装插件。

使用 soft_container

以下是一些基本的使用示例：

1. 基本使用

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Soft Container Example'),
        ),
        body: Center(
          child: SoftContainer(
            width: 200,
            height: 200,
            borderRadius: BorderRadius.circular(20),
            child: Center(
              child: Text('Hello, World!'),
            ),
          ),
        ),
      ),
    );
  }
}

2. 自定义阴影和颜色

你可以通过 shadowColor 和 highlightColor 属性来自定义阴影和高光颜色：

SoftContainer(
  width: 200,
  height: 200,
  borderRadius: BorderRadius.circular(20),
  shadowColor: Colors.grey[300],
  highlightColor: Colors.grey[100],
  child: Center(
    child: Text('Custom Colors'),
  ),
)

3. 自定义形状

你还可以通过 shape 属性来定义容器的形状，例如圆形：

SoftContainer(
  width: 200,
  height: 200,
  shape: BoxShape.circle,
  child: Center(
    child: Text('Circle'),
  ),
)

4. 自定义深度

通过 depth 属性，你可以调整阴影的深度：

SoftContainer(
  width: 200,
  height: 200,
  borderRadius: BorderRadius.circular(20),
  depth: 10,  // 默认值为 5
  child: Center(
    child: Text('Custom Depth'),
  ),
)
回到顶部