Making reusable flutter widget

Question

我是 flutter 的新手，我一直在尝试使我的自定义小部件可重复使用，但一直在死胡同...我希望能够使用更改图标的颜色、卡片中的文本、第一张卡片以及随附的卡片...此外，我应该能够更改图标、图标内的文本以及每个按钮的点击功能应该能够在点击时执行不同的操作

class _CustomCardState extends State<CustomCard> { @override Widget build(BuildContext context) { return Card( margin: EdgeInsets.fromLTRB(20, 10, 20, 1), color: Colors.red, child: InkWell( onTap: (){}, child: ListTile( leading: Card( color: Colors.white, margin: EdgeInsets.all(5), child: Padding( padding: EdgeInsets.all(8.0), child: Icon( KycIcons.add_a_photo, size: 20, color: Colors.red, ), ), ), title: Text('Uplaod your selfie', style: TextStyle(color: Colors.white, fontSize: 16)), ), ), ); } }

Answer 1

Here is a very simple example of how you can build reusable widgets:

import 'package:flutter/material.dart';

class ContainerMain extends StatelessWidget {
  String text;
  Color color; 

  ContainerMain(this.text, {this.color = Colors.white});

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      alignment: Alignment.center,
      height: size.height / 10,
      width: size.width,
      child: Text(
        text,
        style: TextStyle(fontSize: 20, color: color),
      ),
    );
  }
}

Answer 2

Here is my contribution to your class. BTW, it should be a StatelessWidget instead of a StatefulWidget since there are no state variables involved.

import 'package:flutter/material.dart';

class CustomCard extends StatefulWidget {
  final Color iconColor;
  final double iconSize;
  final Color cardColor;
  final Color innerCardColor;
  final String title;
  final TextStyle style;
  final void Function()? onTap;

  const CustomCard({
    Key? key,
    this.iconColor = Colors.red,
    this.iconSize = 20.0,
    this.cardColor = Colors.red,
    this.innerCardColor = Colors.white,
    this.title = 'Upload your selfie',
    this.style = const TextStyle(color: Colors.white, fontSize: 16),
    this.onTap,
  }) : super(key: key);

  @override
  _CustomCardState createState() => _CustomCardState();
}

class _CustomCardState extends State<CustomCard> {
  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.fromLTRB(20, 10, 20, 1),
      color: widget.cardColor,
      child: InkWell(
        child: ListTile(
          leading: Card(
            color: widget.innerCardColor,
            margin: const EdgeInsets.all(5),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Icon(
                KycIcons.add_a_photo,
                size: iconSize,
                color: widget.iconColor,
              ),
            ),
          ),
          title: Text(widget.title, style: widget.style),
          onTap: widget.onTap,
        ),
      ),
    );
  }
}