Question 186874 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Send custom button as widget to a stateless widget

I have a stateless widget that returns a button widget inside of the builder method. I want this stateless widget to be called from different parts of the application but I want the widget to return a button that I pass in with a function to be called. How can I do this?

The buttons that I will be passing in could be –

  • ElevatedButton
  • OutlineButton
  • IconButton

Here is my stateless widget that returns an ElevatedButton.

class FileUploadMutation extends StatelessWidget {
  const FileUploadMutation(this.user, this.switchScreenFn, {Key? key})
      : super(key: key);

  final User user;
  final Function switchScreenFn;
    
  @override
  Widget build(BuildContext context) {
    return Mutation(
      options: MutationOptions(
        document: gql(fileUploadMutation),
      ),
      builder: (runMutation, result) {
        return ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.red,
            elevation: 0,
          ),
          onPressed: () async {
            List<MultipartFile> files = user.files;
            runMutation(
              {
                'containerName': containerName,
                'files': files,
              },
            );
          },
          child: const Text("Continue"),
        );
      },
    );
  }
}
Tags:

2

Answers


  1. 0

    I don’t understand your code but I think you need to Crete a button that can use anywhere ? if so you can Crete your button like this

    class CustomButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;
  final Color color;
  final Color textColor;
  const CustomButton({
    super.key,
    required this.size,
    required this.text,
    required this.color,
    required this.textColor,
    required this.onPressed,
  });

  final Size size;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: size.width / 2.5,
      child: ElevatedButton(
        onPressed: onPressed,
        style: ElevatedButton.styleFrom(
          elevation: 10,
          backgroundColor: color,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(25),
          ),
        ),
        child: Text(
          text,
          style: TextStyle(color: textColor, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

    when you need to use this button just use like this

     CustomButton(
                                onPressed: () async {
                                  _saveForm(context);
                                },
                                size: size,
                                text: "Sign In",
                                color: Colors.white,
                                textColor: Colors.black,
                              ),
    Login or Signup to reply.
  2. 0

    Create your custom Widget like this and call it and define anywhere in your code . onPresses parameter will execute your method call .

                         Click(
                        text: 'Send',
                        onPressed: _sendData,
                        loading: loginMutation.isLoading,
                      ),

    And Custom widget will look like .You call :-

     import 'package:easyclean_business/utils/scaler_config.dart';
import 'package:easyclean_business/utils/theme/color.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

import 'constant_widgets.dart';

class Click extends HookConsumerWidget {
  final String text;
  final void Function() onPressed;
  final bool loading;
  final bool disabled;
  final BorderSide borderSide;
  final double fontsize;
  final BorderRadiusGeometry radius;
  final double btnheight;
  final Color btncolor, textcolor, disabledColor;
  final ScalerConfig scaler = Get.find(tag: 'scaler');
  final Widget blurConatiner;
  Click(
      {Key key,
      this.text,
      this.onPressed,
      this.loading = false,
      this.disabled = false,
      this.borderSide,
      this.fontsize,
      this.radius,
      this.btncolor,
      this.btnheight,
      this.textcolor,
      this.blurConatiner,
      this.disabledColor})
      : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return MaterialButton(
      elevation: 5,
      shape: RoundedRectangleBorder(
        side: BorderSide.none,
        borderRadius: BorderRadius.circular(
          scaler.scalerV(8.0),
        ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          loading
              ? SizedBox(
                  child: CircularProgressIndicator(
                    color: LightColors.bottomtext,
                    strokeWidth: scaler.scalerH(2.0),
                  ),
                  height: scaler.scalerV(16.0),
                  width: scaler.scalerV(16.0),
                )
              : Container(),
          loading
              ? SizedBox(
                  width: scaler.scalerH(16.0),
                )
              : Container(),
          blurConatiner ??
              Text(
                text,
                style: textStyle(
                    fontWeight: FontWeight.w600,
                    fontSize: fontsize ?? scaler.scalerT(16.0),
                    color: textcolor ?? LightColors.bottomtext),
              ),
        ],
      ),
      color: btncolor ?? LightColors.primary,
      disabledColor: disabledColor ?? LightColors.primary,
      onPressed: disabled
          ? null
          : loading
              ? null
              : onPressed,
      minWidth: double.infinity,
      height: btnheight ?? scaler.scalerV(55.0),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search