Flutter圆形卡片组件插件circle_card的使用

Flutter圆形卡片组件插件circle_card的使用

circle_card 是一个用于帮助开发者轻松构建圆形卡片的新 Flutter 插件。

截图

圆形卡片示例

使用方法

如何使用

// 导入CircleCard包
import 'package:circle_card/circle_card.dart';

// 在你的Flutter应用中使用CircleCard组件
CircleCard(
   radius: 100.0, // 设置圆的半径
   elevation: 8.0, // 设置阴影深度
   backgroundColor: Colors.amber, // 设置背景颜色
   child: Image.asset("assets/image.jpg"), // 设置卡片内的内容
),

更多关于Flutter圆形卡片组件插件circle_card的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


在 Flutter 中，如果你想创建一个圆形卡片组件，你可以使用自定义的 CircleCard 插件，或者直接使用 Flutter 的内置组件来实现。以下是一个简单的示例，展示如何创建一个圆形卡片组件。

1. 使用 ClipOval 和 Card 组件

你可以使用 ClipOval 和 Card 组件来实现一个圆形卡片。ClipOval 用于将子组件裁剪为圆形，而 Card 用于创建一个带有阴影和圆角的卡片。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Circle Card Example'),
        ),
        body: Center(
          child: CircleCard(
            child: Image.network(
              'https://via.placeholder.com/150',
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}

class CircleCard extends StatelessWidget {
  final Widget child;

  CircleCard({required this.child});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ClipOval(
      child: Card(
        elevation: 5.0,
        shape: CircleBorder(),
        child: Container(
          width: 150.0,
          height: 150.0,
          child: child,
        ),
      ),
    );
  }
}

2. 使用 Container 和 BoxDecoration

你也可以使用 Container 和 BoxDecoration 来实现圆形卡片的效果。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Circle Card Example'),
        ),
        body: Center(
          child: CircleCard(
            child: Image.network(
              'https://via.placeholder.com/150',
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}

class CircleCard extends StatelessWidget {
  final Widget child;

  CircleCard({required this.child});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      width: 150.0,
      height: 150.0,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black26,
            blurRadius: 5.0,
            spreadRadius: 2.0,
            offset: Offset(0.0, 2.0),
          ),
        ],
      ),
      child: ClipOval(
        child: child,
      ),
    );
  }
}

3. 使用第三方插件 circle_card

如果你想要使用一个专门的插件来实现圆形卡片，你可以使用 circle_card 插件。首先，你需要在 pubspec.yaml 中添加依赖：

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

然后，你可以使用 CircleCard 组件来创建圆形卡片：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Circle Card Example'),
        ),
        body: Center(
          child: CircleCard(
            radius: 75.0,
            child: Image.network(
              'https://via.placeholder.com/150',
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}
回到顶部