Flutter卡片样式插件paper

Flutter卡片样式插件paper_card的使用

本文档将介绍如何在Flutter项目中使用paper_card插件来创建具有卡通纸风格的卡片。该插件提供了多种自定义选项，如边框颜色、背景颜色、圆角半径等。

特性

borderColor: 更改边框颜色。
backgroundColor: 更改背景颜色。
borderRadius: 更改圆角半径。
borderThickness: 边框厚度。
elevation: 卡片背后的阴影或提升效果。
crayonTexture: 是否在卡片上添加蜡笔纹理。
crayonAssetPath: 放置在assets文件夹中的蜡笔纹理图像路径（示例中包含一个示例纹理）。
crayonTextureBlendMode: 蜡笔纹理的混合模式。
margin: 外边距。
padding: 边框内的内边距。
height: 更改高度。
width: 更改宽度。
child: 卡片内部的子组件。

使用方法

以下是一个简单的示例代码，展示了如何使用paper_card插件创建一个卡片：

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

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        fontFamily: 'darya',
      ),
      home: Scaffold(
        backgroundColor: Colors.red,
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              PaperCard(
                height: 200,
                width: 200,
                borderColor: Colors.red,
                backgroundColor: Color(0xFF8BDEFF),
                borderRadius: 25,
                borderThickness: 20,
                elevation: 2,
                padding: EdgeInsets.all(16),
                margin: EdgeInsets.all(16),
                texture: true,
                textureAssetPath: 'assets/crayon_mask.png',
                textureBlendMode: BlendMode.overlay,
                child: Text(
                  'Hello World This is just a test text',
                  style: TextStyle(fontWeight: FontWeight.w900, fontSize: 14),
                  textDirection: TextDirection.rtl,
                ),
              ),
              // padding: EdgeInsets.all(0),
              // elevation: 5,
              // backgroundColor: Theme.of(context).colorScheme.surface,
              // borderColor: Theme.of(context).colorScheme.onSurface,
              // borderThickness: 4,
              PaperCard(
                height: 200,
                width: 150,
                // textureAssetPath: 'assets/crayon_mask.png',
                borderThickness: 10,
                elevation: 5,
                child: Text(
                  'تست فارسی 3: سلام دنیا',
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 17),
                  textDirection: TextDirection.rtl,
                ),
                backgroundColor: Color.fromARGB(255, 255, 205, 25),
                // textureOpacity: 0.1,
              ),
              PaperCard(
                height: 100,
                width: 200,
                borderRadius: 20,
                borderThickness: 5,
                elevation: 0,
                backgroundColor: Colors.red,
                child: Text(
                  'تست فارسی ۲: سلام دنیا',
                  style: TextStyle(fontWeight: FontWeight.w900, fontSize: 17),
                  textDirection: TextDirection.rtl,
                ),
              ),
              InkWell(
                onTap: () {
                  print('Card Tapped');
                  setState(() {});
                },
                child: PaperCard(
                  height: 100,
                  width: 200,
                  textureAssetPath: 'assets/crayon_mask.png',
                  backgroundColor: Color(0xFFFFF9E3),
                  child: Text(
                    'تست فارسیسسسسسس ۱: سلام دنیا',
                    style: TextStyle(fontWeight: FontWeight.w900, fontSize: 20),
                    textDirection: TextDirection.rtl,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

示例

在下面的示例代码中，我们可以看到如何在一个简单的Flutter应用中使用paper_card插件创建多个不同样式的卡片。

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

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        fontFamily: 'darya',
      ),
      home: Scaffold(
        backgroundColor: Colors.red,
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              PaperCard(
                height: 200,
                width: 200,
                borderColor: Colors.red,
                backgroundColor: Color(0xFF8BDEFF),
                borderRadius: 25,
                borderThickness: 20,
                elevation: 2,
                padding: EdgeInsets.all(16),
                margin: EdgeInsets.all(16),
                texture: true,
                textureAssetPath: 'assets/crayon_mask.png',
                textureBlendMode: BlendMode.overlay,
                child: Text(
                  'Hello World This is just a test text',
                  style: TextStyle(fontWeight: FontWeight.w900, fontSize: 14),
                  textDirection: TextDirection.rtl,
                ),
              ),
              // padding: EdgeInsets.all(0),
              // elevation: 5,
              // backgroundColor: Theme.of(context).colorScheme.surface,
              // borderColor: Theme.of(context).colorScheme.onSurface,
              // borderThickness: 4,
              PaperCard(
                height: 200,
                width: 150,
                // textureAssetPath: 'assets/crayon_mask.png',
                borderThickness: 10,
                elevation: 5,
                child: Text(
                  'تست فارسی 3: سلام دنیا',
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 17),
                  textDirection: TextDirection.rtl,
                ),
                backgroundColor: Color.fromARGB(255, 255, 205, 25),
                // textureOpacity: 0.1,
              ),
              PaperCard(
                height: 100,
                width: 200,
                borderRadius: 20,
                borderThickness: 5,
                elevation: 0,
                backgroundColor: Colors.red,
                child: Text(
                  'تست فارسی ۲: سلام دنیا',
                  style: TextStyle(fontWeight: FontWeight.w900, fontSize: 17),
                  textDirection: TextDirection.rtl,
                ),
              ),
              InkWell(
                onTap: () {
                  print('Card Tapped');
                  setState(() {});
                },
                child: PaperCard(
                  height: 100,
                  width: 200,
                  textureAssetPath: 'assets/crayon_mask.png',
                  backgroundColor: Color(0xFFFFF9E3),
                  child: Text(
                    'تست فارسیسسسسسس ۱: سلام دنیا',
                    style: TextStyle(fontWeight: FontWeight.w900, fontSize: 20),
                    textDirection: TextDirection.rtl,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

yibo5220 1楼•2 天前作者

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

当然，以下是如何在Flutter项目中使用paper_card插件来创建卡片样式的示例代码。paper_card插件允许你以更具吸引力的方式展示信息，通常带有阴影和圆角效果。

首先，确保你已经在pubspec.yaml文件中添加了paper_card依赖：

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

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

接下来，在你的Dart文件中使用PaperCard组件。以下是一个简单的示例，展示如何使用PaperCard来创建一个卡片：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PaperCard Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('PaperCard Demo'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: PaperCard(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(16),
              ),
              elevation: 8,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Image.network(
                    'https://via.placeholder.com/150',
                    width: 150,
                    height: 150,
                    fit: BoxFit.cover,
                  ),
                  SizedBox(height: 16),
                  Text(
                    'Card Title',
                    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(height: 8),
                  Text(
                    'This is a description of the card content.',
                    style: TextStyle(fontSize: 16),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中：

我们导入了paper_card包。
创建了一个PaperCard组件，并设置了它的形状（shape）、阴影（elevation）以及子组件（child）。
子组件包含一个图片（Image.network），一个标题（Text），以及一个描述文本（Text）。
使用Column来垂直排列这些子组件，并使用SizedBox来添加间距。

你可以根据需要进一步自定义PaperCard的样式，例如调整阴影强度、圆角半径、背景颜色等。PaperCard提供了灵活的方式来创建美观的卡片组件，非常适合在Flutter应用中展示信息。