I am trying to create a reusable custom widget in flutter but the color of the button is not affected. I appreciate it if you can help me.

Below is my custom widget file.dart:

  final String title;
  final Color brand;
  final Function onPressed;

  const TaxiButton ({Key? key, required this.brand, required this.title, required this.onPressed}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return RaisedButton(
     onPressed: onPressed(),
      shape: new RoundedRectangleBorder(
          borderRadius: new BorderRadius.circular(25)
      ),
      textColor: Colors.redAccent,
      color: brand,
      child: Container(
        height: 50,
        child: Center(
          child: Text(
            title,
            style: TextStyle(fontSize: 18),
          ),
        ),
      ),
    );
  }
}

and this is my registration.dart file where I have added the widget. this is the whole code in this file but you can find TaxiButton widget in it.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:untitled/Screens/loginpage.dart';
import 'package:untitled/brand_colors.dart';
import 'package:untitled/widgets/TaxiButton.dart';
class RegistrationPage extends StatefulWidget {
  const RegistrationPage ({Key? key}) : super(key: key);
  static const String id = 'register';


  @override
  State<RegistrationPage> createState() => _RegistrationPageState();
}

class _RegistrationPageState extends State<RegistrationPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.all(8.0),
            child: Column(
              children: <Widget>[
                SizedBox(height: 70,),
                Image(
                  alignment: Alignment.center,
                  height: 100.0,
                  width: 100.0,
                  image: AssetImage('images/logo.png'),
                ),
                SizedBox(height: 40,),
                Text('Create a Rider\'s Account',
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 25, fontFamily: 'Brand-Regular'),
                ),

                Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: Column(
                    children: <Widget>[
                      TextField(
                        keyboardType: TextInputType.text,
                        decoration: InputDecoration(
                            labelText: 'Full Name',
                            labelStyle: TextStyle(
                              fontSize: 14.0,
                            ),
                            hintStyle: TextStyle(
                              color: BrandColors.colorLightGray,
                              fontSize: 10.0,
                            )
                        ),
                        style: TextStyle(fontSize: 14),
                      ),

                      SizedBox(height: 10,),

                      TextField(
                        keyboardType: TextInputType.emailAddress,
                        decoration: InputDecoration(
                            labelText: 'Email address',
                            labelStyle: TextStyle(
                              fontSize: 14.0,
                            ),
                            hintStyle: TextStyle(
                              color: Colors.grey,
                              fontSize: 10.0,
                            )
                        ),
                        style: TextStyle(fontSize: 14),
                      ),

                      SizedBox(height: 10,),

                      TextField(
                        obscureText: true,
                        decoration: InputDecoration(
                            labelText: 'Password',
                            labelStyle: TextStyle(
                              fontSize: 14.0,
                            ),
                            hintStyle: TextStyle(
                              color: Colors.grey,
                              fontSize: 10.0,
                            )
                        ),
                        style: TextStyle(fontSize: 14),
                      ),

                      SizedBox(height: 10,),


                      const TextField(
                        keyboardType: TextInputType.phone,
                        decoration: InputDecoration(
                            labelText: 'Phone Number',
                            labelStyle: TextStyle(
                              fontSize: 14.0,
                            ),
                            hintStyle: TextStyle(
                              color: BrandColors.colorAccentPurple,
                              fontSize: 10.0,
                            )
                        ),
                        style: TextStyle(fontSize: 14),
                      ),

                      SizedBox(height: 40,),

                      TaxiButton(
                        brand: BrandColors.colorAccentPurple,
                        title: 'Register',
                        onPressed: (){},
                      ),
                    ],
                  ),
                ),

                FlatButton(
                    onPressed: (){
                      Navigator.pushNamedAndRemoveUntil(context, LoginPage.id, (route) => false);
                    },
                    child: Text('Already have a Rider account? Log in')),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

RaisedButton is deprecated you should use TextButton or ElevatedButton

TextButton(
          onPressed: onPressed,
          style: TextButton.styleFrom(
              elevation: elevation ?? 1,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(radius)),
              backgroundColor: color ?? Colors.blue),
          child: Text(text)),

CodePudding user response：

Hi as RaisedButton is deprecated i have modify your code by replacing RaisedButton by TextButton.

You can set background color by configure style like below-

final String title;
          final Color brand;
          final VoidCallback onPressed;
        
          const TaxiButton ({Key? key, required this.brand, required this.title, required this.onPressed}) : super(key: key);
        
        
          @override
          Widget build(BuildContext context) {
            return TextButton(
            onPressed: onPressed,
            style: TextButton.styleFrom(
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
              backgroundColor: brand,
            ), 
            child: Text(title)
           );
          }
        }

CodePudding user response：

You should change your

 final Function onPressed; 

to

final void Function() onPressed;

in custom widget, and then in RaisedButton pass it like so:

return RaisedButton(
     onPressed: onPressed,
      shape: new RoundedRectangleBorder(
          borderRadius: new BorderRadius.circular(25)
      ),
      textColor: Colors.redAccent,
      color: brand,
      child: Container(
        height: 50,
        child: Center(
          child: Text(
            title,
            style: TextStyle(fontSize: 18),
          ),
        ),
      ),
    );