Flutter FlatButton is deprecated - alternative solution

8.2k Views Asked by At

This is my FlatButton. How can I solve it with textButton or elevatedButton?

Center(
  child: FlatButton(
    onPressed: () {  },
    child: Container(
      margin:EdgeInsets.only(top: 25),
      child: image != null 
        ? Image.file(image,width:140,height:192,fit:BoxFit.fill) 
        : Container(
          width: 240, 
          height: 200, 
          child: Icon(Icons.camera_front, size: 100, color:Colors.grey,)
        ),
      ),
    ),
),
4

There are 4 best solutions below

0
On

FlatButton is replaced with TextButton and RaisedButton is replaced with ElevatedButton.

Here is the code of TextButton with styling

TextButton(
    onPressed: () {  },
    style: ButtonStyle(
      backgroundColor: MaterialStateProperty.all(Colors.deepPurple)
    ),
    child: Container(
      margin:EdgeInsets.only(top: 25),
      child: image != null
          ? Image.file(image,width:140,height:192,fit:BoxFit.fill)
          : Container(
          width: 240,
          height: 200,
          child: Icon(Icons.camera_front, size: 100, color:Colors.grey,)
      ),
    ),
  ),
0
On

Just change FlatButton to TextButton or ElevatedButton.

0
On

Change FlatButton to TextButton.

Center(
  child: TextButton(
    onPressed: () {  },
    child: Container(
      margin:EdgeInsets.only(top: 25),
      child: image != null 
        ? Image.file(image,width:140,height:192,fit:BoxFit.fill) 
        : Container(
          width: 240, 
          height: 200, 
          child: Icon(Icons.camera_front, size: 100, color:Colors.grey,)
        ),
      ),
    ),
),

For styling using TextButton,

            TextButton(
              style: TextButton.styleFrom(
                padding: const EdgeInsets.all(16.0),
                primary: Colors.white,
                textStyle: const TextStyle(fontSize: 20),
              ),
              onPressed: () {},
              child: const Text('Gradient'),
            ),
0
On

This is a breaking change in the latest release of Flutter.

The FlatButton, RaisedButton and OutlineButton widgets have been 
replaced by TextButton, ElevatedButton, and OutlinedButton respectively.

Source: https://docs.flutter.dev/release/breaking-changes/buttons

See below table for comparison of old vs new button https://docs.flutter.dev/release/breaking-changes/buttons#context

And API details for changes at indvidual styling level. https://docs.flutter.dev/release/breaking-changes/buttons#api-change-buttonstyle-instead-of-individual-style-properties