Flutter TextButton is there but not displaying-CodePudding

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: () { },
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

CodePudding user response：

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: () { },
            ),

CodePudding user response：

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

Change

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

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

CodePudding user response：

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.