Flutter 文本按钮存在但未显示

p3rjfoxz  于 2023-01-31  发布在  Flutter
关注(0)|答案(3)|浏览(208)

我一直在更新Flutter应用程序,用新的TextButton替换了FlatButton。但现在这个按钮不在卡片上显示。我可以点击它,它就能工作,如果我长按,你可以看到这个按钮和它的标题。
卡片小部件代码如下所示。

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

e7arh2l61#

CardTextButtonText三个都是白色的。因此尝试更改ButtonText的颜色。
更改TextButton颜色的步骤

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

backgroundColor会将TextButton的背景颜色更改为黑色,primary会将字体颜色更改为白色,您可以相应地对其进行自定义。

omhiaaxx

omhiaaxx2#

您的Card颜色和TextButton文本颜色都是白色,您只需要更改其中一个。
我复制了你的代码,改变了颜色,一切都很顺利。

Card(
color: Colors.white,
TextButton(
              style: ButtonStyle(
                foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
              ),
              child: Text('Fill', style: TextStyle(color: Colors.**white**)),
              onPressed: () { },
            ),
k3fezbri

k3fezbri3#

CardTextButton都是white颜色,因此请尝试更改代码。
变更

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

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

相关问题