Flutter 在Gridview中单击按钮时抖动更改文本

目前，我有一个包含12个单词的字符串，它是从另一个页面的

参数中提取的：

Widget build(BuildContext context) {
    final String seed = ModalRoute.of(context).settings.arguments;

然后，我将字符串拆分并将其随机排列成一个数组，然后在
GridView
中显示为
MaterialButton
。我需要的是，当用户单击
MaterialButton
时，它会将拆分的单词添加到另一个字符串数组中，然后显示在
网格视图上方的
容器中。
GridView
是通过使用
for
循环将
MaterialButton
添加到
[]
来构建的，该循环调用
setState（）
来更改bool值，从而更改按钮的外观并将单词添加到容器中。起初，我在单击按钮时遇到问题，调用
setState（）
，从而刷新整个页面并重新排列单词，但找到后，我将
MaterialButton
包装在
StatefulBuilder
中，阻止它重建整个页面。但这也会阻止上面容器中的
文本更新。我能做些什么，当用户点击一个按钮时，它会改变它的外观，并更新上面容器中的文本

以下是我目前的代码：

import 'package:flutter/material.dart';
import 'package:myapp/color_utils.dart';
class SeedConfirmPage extends StatefulWidget {
  SeedConfirmPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _SeedConfirmPageState createState() => _SeedConfirmPageState();
}

class _SeedConfirmPageState extends State<SeedConfirmPage> {
  List<bool> clicked = [
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false
  ];
@override
  Widget build(BuildContext context) {
    final String seed = ModalRoute.of(context).settings.arguments;
    List<String> seedArray = seed.split(" ")..shuffle();
    final seedChip = <Widget>[];
    List<String> seedText = [];
    for (var i = 0; i < seedArray.length; i++) {
      seedChip.add(StatefulBuilder(builder: (BuildContext context, setState) {
        return MaterialButton(
          color: clicked[i] ? colorBlack : Colors.white,
          textColor: clicked[i] ? Colors.white : colorBlack,
          minWidth: MediaQuery.of(context).size.width,
          height: 32,
          child: Text(
            seedArray[i],
            style: TextStyle(fontSize: 12),
          ),
          onPressed: () {
            setState(() {
              clicked[i] = !clicked[i];
              if (clicked[i]) {
                seedText.add(seedArray[i]);
              } else {
                seedText.remove(seedArray[i]);
              }
            });
          },
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(4),
          ),
        );
      }));
    }
    return Scaffold(
      appBar: AppBar(
        backgroundColor: splashBG,
        leading: BackButton(color: Colors.white),
        title: Text("Back"),
      ),
      backgroundColor: splashBG,
      body: Container(
        padding: EdgeInsets.only(
          left: 16,
          right: 16,
        ),
        child: Column(
          children: <Widget>[
            Flexible(
              child: Container(
                width: MediaQuery.of(context).size.width / 2,
                child: Image(
                  image: AssetImage('assets/images/logo_1.png'),
                ),
              ),
            ),
            Container(
              height: 120,
              padding: EdgeInsets.all(32.0),
              margin: EdgeInsets.only(top: 28, bottom: 28),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8), color: colorBlack),
              child: Center(
                child: Text(
                  seedText.toString(),
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            Container(
              width: MediaQuery.of(context).size.width,
              height: 120,
              child: GridView.count(
                crossAxisCount: 4,
                crossAxisSpacing: 8,
                mainAxisSpacing: 8,
                childAspectRatio: MediaQuery.of(context).size.width /
                    (MediaQuery.of(context).size.height / 5),
                children: seedChip,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“package:myapp/color_utils.dart”；
类SeedConfirmPage扩展StatefulWidget{
SeedConfirmPage（{Key-Key，this.title}）：super（Key:Key）；
最后的字符串标题；
@凌驾
_SeedConfirmPageState createState（）=>\u SeedConfirmPageState（）；
}
类_SeedConfirmPageState扩展了状态{
单击列表=[
假,，
假,，
假,，
假,，
假,，
假,，
假,，
假,，
假,，
假,，
假,，
假的
];
@凌驾
小部件构建（构建上下文）{
最后一个字符串seed=ModalRoute.of（context）.settings.arguments；
List seedArray=seed.split（“”..shuffle（）；
最终种子芯片=[]；
列表种子文本=[]；
对于（var i=0；i

我知道这不是最佳的检查按钮的状态，以了解它是否是点击与否。因此，一个附带的问题是，我可以做些什么来检查按钮是否已被单击

编辑

以下是我试图归档的内容的屏幕截图：

用户按下前：


用户按下后：

您可以用更改按钮颜色的相同方法进行操作。在
MaterialButton
中将此项添加到子项

child: clicked[i] ? 
          Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
          children: [
          Text(seedArray[i],style: TextStyle(fontSize: 12),),
           Text('x',style: TextStyle(fontSize: 12),),
        ])  :
          Text(seedArray[i],style: TextStyle(fontSize: 12),),

你能分享你的用户界面和用户体验更好的理解吗？当然，我已经更新了问题，包括图片谢谢你的回答，但这不是我要找的。现在，我已经删除了按钮中的x。我需要的是
MaterialButton
网格视图上方容器中的文本根据按钮的按下进行更改。e、 g:如果用户按下“你的”和“秘密”，则相应的按钮将变为黑色，文本将变为“你的秘密”