1

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,)
        ),
      ),
    ),
),
enzo
  • 9,861
  • 3
  • 15
  • 38
aaryan
  • 19
  • 1
  • 2

3 Answers3

1

Just change FlatButton to TextButton or ElevatedButton.

enzo
  • 9,861
  • 3
  • 15
  • 38
1

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'),
            ),
Sachin Liyanage
  • 534
  • 4
  • 15
1

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,)
      ),
    ),
  ),
Bihim
  • 71
  • 3