Home > Mobile >  I want a constant background red colored button in flutter
I want a constant background red colored button in flutter

Time:08-24

This is my button code in an expanded widget i want the button to be constantly red like it was on FlatButton(), I want a constant background red colored button using TextButton in flutter. And the background color should fill the entire expanded section.

Expanded(
      child: TextButton(
        style: TextButton.styleFrom(
          padding: const EdgeInsets.all(18),
          primary: Colors.red,
          textStyle: const TextStyle(fontSize: 20.0),
        ),
        child: const Text("False"),
        onPressed: () {},
      ),
    ),

[![I want the Red color in background to be constantly filled !! the buttons are now filling when they are hovered ][2]][2]

CodePudding user response:

I got the answer by just simply using the ElevatedButton instead of TextButton and here how it goes :-) Thanks for your answers and guidence:

Expanded(
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          padding: const EdgeInsets.all(18),
          primary: Colors.red,
          onPrimary: Colors.white,
          textStyle: const TextStyle(fontSize: 20.0),
        ),
        child: const Text("False"),
        onPressed: () {},
      ),
    ),

CodePudding user response:

Here try this, use backgroundColor, also I will prefer ElevatedButton

return Scaffold(
  body: LayoutBuilder(
    builder: (context, constraints) => Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        SizedBox(
          width: constraints.maxWidth,
          child: TextButton(
            style: TextButton.styleFrom(
              backgroundColor: Colors.red,
              padding: const EdgeInsets.all(18),
              primary: Colors.red,
            ),
            child: Text(
              "False",
              style: const TextStyle(fontSize: 20.0, color: Colors.white),
            ),
            onPressed: () {},
          ),
        ),
        SizedBox(
          width: constraints.maxWidth,
          child: ElevatedButton(
            style: ElevatedButton.styleFrom(
              padding: EdgeInsets.all(18),
              primary: Colors.red,
            ),
            onPressed: () {},
            child: Text(
              "False",
              style: const TextStyle(fontSize: 20.0, color: Colors.white),
            ),
          ),
        ),
      ],
    ),
  ),
  
);
  • Related