Question 77138 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter TextButton is there but not displaying

I’ve been updating a Flutter app and replaced a FlatButton with the new TextButton. But now the button doesn’t display on the Card. I can click it and it works, and if I long press you can see the button and it’s caption.

The card widget code is below.

Card otherSwapCard(
    List<FSRows?> data, int index, context, Function circularprogress) {
  String? shiftDate = formatJsonDate(data[index]!.shiftDate!, 'dd/MM/yyyy');
  //calculate time value string
  String shiftTimes =
      '${formatJsonTime24To12(data[index]!.startTime!)}  -  ${formatJsonTime24To12(data[index]!.finishTime!)}';

  return Card(
    color: Colors.white,
    elevation: 3,
    margin: EdgeInsets.fromLTRB(16, 4, 16, 12),
    child: Container(
      decoration: BoxDecoration(
        border: Border(
          top: BorderSide(
            width: 2.0,
            color: kMainColor40,
          ),
        ),
      ),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: <Widget>[
            Expanded(
              flex: 72,
              child: Column(
                children: <Widget>[
                  DataKeyRow(dkLabel: 'Job:', dkValue: data[index]!.jobName!),
                  SizedBox(height: 2),
                  DataKeyRow(dkLabel: 'Date:', dkValue: shiftDate!),
                  SizedBox(height: 2),
                  DataKeyRow(
                      dkLabel: 'Time:', dkValue: shiftTimes.toLowerCase()),
                ],
              ),
            ),
            Expanded(
              flex: 28,
              child: Center(
                child: TextButton(
                  style: ButtonStyle(
                    foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
                  ),
                  child: Text('Fill', style: TextStyle(color: Colors.white)),
                  onPressed: () { },
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  );
}
Tags:

3

Answers


  1. 0

    Both your Card color and TextButton Text color are White, you just need to change one of them.

    I copied your code and change the color and everything went fine.

    Card(
color: Colors.white,

    TextButton(
              style: ButtonStyle(
                foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
              ),
              child: Text('Fill', style: TextStyle(color: Colors.**white**)),
              onPressed: () { },
            ),
    Login or Signup to reply.
  2. 0

    Card and TextButton both are in white color , so try changing your code.

    Change

    child: Text('Fill', style: TextStyle(color: Colors.white)),

    to

    child: Text('Fill', style: TextStyle(color: Colors.black)),
    Login or Signup to reply.
  3. 0

    Card, TextButton, and Text three are in white color. So trying changing the color of the Button or Text.

    To change the TextButton color

    TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
      primary: Colors.white,
      backgroundColor: Colors.black, // Background Color
),
  child: const Text(
    'Text Button ',
    style: TextStyle(fontSize: 24),
  ),
)

    The backgroundColor will change the TextButton background color to black and the primary will change the font color to white, you can customize it accordingly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search