Button with Image Background Flutter

the "RaisedButton" is a material component , its take it shape depends on "material design" roles , you can create your own custom button widget

    GestureDetector(
      child: Container(
       width:120,
       height: 40,
       decoration: BoxDecoration(
         color: Colors.black,
         image: DecorationImage(
           image:AssetImage("assets/background_button.png"), 
           fit:BoxFit.cover
         ),
       child: Text("clickMe") // button text
       )
      ),onTap:(){
       print("you clicked me");
      }
    )

If anyone else come here looking for this, MaterialButton works perfectly.

      MaterialButton(
        padding: EdgeInsets.all(8.0),
        textColor: Colors.white,
        splashColor: Colors.greenAccent,
        elevation: 8.0,
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage('assets/button_color.png'),
                fit: BoxFit.cover),
          ),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text("SIGN OUT"),
          ),
        ),
        // ),
        onPressed: () {
          print('Tapped');
        },
      ),

Tags:

Dart

Flutter