如何创建自定义卡片（颤振小部件）？答案

【问题标题】：how can create custom card (flutter widget)?如何创建自定义卡片（颤振小部件）？
【发布时间】：2019-12-20 12:06:45
【问题描述】：

我正在尝试在 Flutter 中创建一个自定义卡片，如下所示：

我们将不胜感激任何建议或指导。

【问题讨论】：

【解决方案1】：

你可以在任何地方使用这个小部件。

CardService(
      icon: 'assets/icons/services/poll.svg',
      text: getTranslated(context, 'poll'),
      onTap: () {
        context.router.push(PollScreenRoute());
      },
    );

// card_service.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:theme_provider/theme_provider.dart';


class CardService extends StatelessWidget {

const CardService({this.text, this.onTap, this.icon});
final String? text;
final String? icon;
final GestureTapCallback? onTap;

@override
Widget build(BuildContext context) {
  var theme = ThemeProvider.controllerOf(context).theme.data;
    return Card(
     elevation: 4.0,
     shadowColor: Colors.black26,
     margin: EdgeInsets.all(0.0),
     shape: RoundedRectangleBorder(
       borderRadius: BorderRadius.circular(13.0),
     ),
    child: CupertinoButton(
     onPressed: onTap,
     color: theme.cardColor,
     alignment: Alignment.center,
     padding: EdgeInsets.symmetric(horizontal: 16.0),
     borderRadius: BorderRadius.circular(13.0),
     child: Column(
       mainAxisAlignment: MainAxisAlignment.center,
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
         CircleAvatar(
           radius: 23,
           backgroundColor: theme.primaryColor.withOpacity(0.1),
           child: SvgPicture.asset(icon!, height: 26.0, color: theme.primaryColor),
         ),
         SizedBox(height: 13.0),
         Text(
          text!,
          maxLines: 2,
          overflow: TextOverflow.ellipsis,
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 14.0,
            fontWeight: FontWeight.w500,
            fontFamily: 'Montserrat',
            color: theme.accentIconTheme.color,
          ),
        )
      ],
    ),
   ),
  );
 }
}

【讨论】：

【解决方案2】：

你应该试试这个https://flutter.dev/docs/development/ui/layout，它会对你有很大的帮助，另一方面，你可以试试 Stack 小部件的右上角图标，其他组件可以放在一个列中，例如：

Card(
  child: Stack(
    children: [
      Positioned(
        top: 0,
        right: 0,
        child: Container(
          decoration: BoxDecoration(
            gradient: RadialGradient(
              colors: [
                Colors.red,
                Colors.white
              ],

              // Todo: to achive it as you have it in the picture you need to play with the radialgradient, check the oficial documentation for radialgradient and check for center, stops and radius properties of radialgradient
            )
          ),
          child: Padding(padding: EdgeInsets.all(10.0), child: Icon(Icons.menu /*Replace it with your icon*/)),
        ),
      ),
      Padding(
        padding: EdgeInsets.all(20.0),
        child: Column(
          children: <Widget>[
            Text("some text"),
            Text("some text 2"),
            Align(
              alignment: Alignment.centerRight,
              child: Chip(
                label: Text('0'),
              ),
            ),
          ],
        ),
      )
    ],
  ),
);

这不是完整的答案，您需要调整尺寸、高度、宽度、填充和边距，祝您好运

【讨论】：