Flutter卡片容器插件card

Example

CardContainer 是一个简化创建白色容器的插件，支持自定义 elevation（高度阴影）以实现 Material Design 效果。它还提供了灵活的内边距和圆角选项，可以轻松创建类似卡片的 UI 组件。非常适合在 Flutter 中构建具有提升效果且美观的内容块。

使用说明

首先，确保在 pubspec.yaml 文件中添加插件依赖：

dependencies:
  card_container: ^1.0.0

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

基本用法

以下是一个简单的示例，展示如何使用 CardContainer 创建一个带有阴影和圆角的卡片：

import 'package:flutter/material.dart';
import 'package:card_container/card_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('Card Container Example'),
        ),
        body: Center(
          child: CardContainer(
            padding: EdgeInsets.all(20), // 设置内边距
            borderRadius: BorderRadius.circular(15), // 设置圆角半径
            elevation: 10, // 设置阴影高度
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Hello, Card!',
                  style: TextStyle(fontSize: 20),
                ),
                SizedBox(height: 10),
                ElevatedButton(
                  onPressed: () {},
                  child: Text('Click Me'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

zlyuanteng 1楼

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

card_container 是一个用于 Flutter 的插件，它可以帮助你轻松地创建带有阴影、圆角和其他样式的卡片容器。这个插件通常用于创建 Material Design 风格的卡片，但也可以根据需要进行自定义。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  card_container: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

使用 `CardContainer`

CardContainer 是一个简单的容器，它提供了许多与 Card 小部件相似的属性，但更加灵活。以下是一个基本的使用示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('CardContainer Example'),
        ),
        body: Center(
          child: CardContainer(
            elevation: 5.0,
            borderRadius: BorderRadius.circular(10.0),
            color: Colors.white,
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text(
                'This is a CardContainer',
                style: TextStyle(fontSize: 20.0),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

主要属性

elevation: 卡片的阴影高度，类似于 Card 的 elevation 属性。
borderRadius: 卡片的圆角半径，可以使用 BorderRadius.circular() 来设置。
color: 卡片的背景颜色。
child: 卡片内部的内容，可以是任何 Widget。
margin: 卡片的外边距。
padding: 卡片的内边距。

自定义样式

你可以通过设置不同的属性来自定义卡片的样式。例如，你可以设置不同的阴影高度、圆角半径、背景颜色等。

CardContainer(
  elevation: 10.0,
  borderRadius: BorderRadius.circular(20.0),
  color: Colors.blue[100],
  margin: EdgeInsets.all(10.0),
  padding: EdgeInsets.all(20.0),
  child: Text(
    'Customized CardContainer',
    style: TextStyle(fontSize: 24.0, color: Colors.blue[900]),
  ),
)

Flutter卡片容器插件card_container的使用