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),
               ),
             ),
           ),
         ),
       );
     }
   }