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

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

安装

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

dependencies:
  fancy_containers: ^0.0.2

导入包并在你的 Flutter 应用中使用它：

import 'package:inbuilt_container/inbuilt_container.dart';

示例

你可以修改以下属性：

  • 高度 (height)
  • 宽度 (width)
  • 背景颜色 (background color)
  • 边框半径 (border radius)
  • 外边距 (margin)
  • 内边距 (padding)
  • 自定义子组件 (widget)

代码示例

class _CustomContainerState extends State<CustomContainer> {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        // 设置圆角
        borderRadius: BorderRadius.circular(widget.boarderRadius ?? 15),
        // 设置背景颜色
        color: widget.bgColor ?? Colors.white,
        // 设置阴影效果
        boxShadow: [
          BoxShadow(
            color: widget.bgBlurColor ?? Colors.greenAccent,
            blurRadius: widget.boarderBlurRadius ?? 2
          )
        ]
      ),
      // 设置高度
      height: widget.height ?? MediaQuery.of(context).size.width / 2,
      // 设置宽度
      width: widget.width ?? MediaQuery.of(context).size.width,
      // 设置外边距
      margin: EdgeInsets.all(widget.margin ?? 10),
      // 设置内边距
      padding: EdgeInsets.all(widget.padding ?? 10), 
      // 设置自定义子组件
      child: widget.customWidget ?? Container(),
    );
  }
}

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

1 回复

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


在Flutter中，你可以通过自定义Widget来创建自己的容器插件。InbuiltContainer 并不是Flutter官方提供的组件，因此它可能是某个第三方库或自定义实现的组件。为了帮助你理解如何使用自定义容器插件，我将展示如何创建和使用一个简单的自定义容器。

1. 创建自定义容器

首先，我们来创建一个简单的自定义容器。这个容器将包含一些内置的样式和功能。

import 'package:flutter/material.dart';

class InbuiltContainer extends StatelessWidget {
  final Widget child;
  final Color backgroundColor;
  final double borderRadius;
  final EdgeInsets padding;

  const InbuiltContainer({
    Key? key,
    required this.child,
    this.backgroundColor = Colors.white,
    this.borderRadius = 8.0,
    this.padding = const EdgeInsets.all(16.0),
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      padding: padding,
      decoration: BoxDecoration(
        color: backgroundColor,
        borderRadius: BorderRadius.circular(borderRadius),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 10,
            offset: Offset(0, 4),
          ),
        ],
      ),
      child: child,
    );
  }
}

2. 使用自定义容器

现在你可以在你的应用中使用这个自定义容器了。

import 'package:flutter/material.dart';
import 'inbuilt_container.dart'; // 导入自定义容器

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Inbuilt Container Example'),
        ),
        body: Center(
          child: InbuiltContainer(
            backgroundColor: Colors.blue[50],
            borderRadius: 12.0,
            padding: EdgeInsets.all(20.0),
            child: Text(
              'Hello, Inbuilt Container!',
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
      ),
    );
  }
}
回到顶部