使用动态 onPressed 颤振创建新按钮小部件

Question

I have a button widget with an onPressed function. Now I want to use this widget to create multiple buttons, but of course with another function to run with.

New buttonwidget:

class RunderKreis extends StatelessWidget {
  final DecorationImage? image;
  final double size;
  Color? color;
  IconData? icon;
  Color? onPrimaryColors;
  Future<dynamic>? directTo;
  RunderKreis({
    Key? key,
    this.color = const Color.fromARGB(255, 95, 81, 136),
    this.size = 90,
    this.icon,
    this.onPrimaryColors,
    this.image,
    this.directTo,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: size,
      width: size,
      child: ElevatedButton(
        onPressed: () {
              directTo;
        },
        child: Icon(icon),
      ),
    );
  }
}

Using it :

RunderKreis(
                        icon: FeatherIcons.pieChart,
                        onPrimaryColors: AppColors.backColor,
                         directTo:  Future.delayed(Duration(seconds: 1),(){
                       Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => const Steckbrief()),
                      );}),
                      ),
RunderKreis(...),
RunderKreis(...),

Right now I use 3 buttons, but I get immediately redirected to the page I navigate to with the first onPressed function, without pressing the a button :( Am I implementing something the wrong way?

Thanks in advance!

Answer 1

I prefer this style.

 child: ElevatedButton(
        onPressed:directTo,
        child: Icon(icon),
      ),

And use case will be

 directTo: () async {
await Future.delayed(Duration(seconds: 1), () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => const Steckbrief()),
  );
});

You can useVoidCallback for tap event.

class RunderKreis extends StatelessWidget {
  final DecorationImage? image;
  final double size;
  Color? color;
  IconData? icon;
  Color? onPrimaryColors;
  VoidCallback? onTap;
    RunderKreis({
    Key? key,
    this.color = const Color.fromARGB(255, 95, 81, 136),
    this.size = 90,
    this.icon,
    this.onPrimaryColors,
    this.image,
    this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: size,
      width: size,
      child: ElevatedButton(
        onPressed: onTap,
        child: Icon(icon),
      ),
    );
  }
}

And use

RunderKreis(
  onTap: () async {},
),
RunderKreis(
  onTap: () {},
),