颤振设计:标题,子标题,游戏板,图标和重置按钮

时间:2019-04-07 16:45:53

标签: flutter flutter-layout

我正在编写一个儿童游戏。设计包括标题,子标题,游戏板,图标,然后包括复位按钮。但是,当我添加图标时,它们与游戏板重叠。有人可以帮我吗?

我所拥有的:

enter image description here

我要构建的东西:

enter image description here

我得到的是

enter image description here

这是我的构建函数:

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: new Text("Cat Attack"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[

            // Headline
            Material(
              child: Text(
                statusTextHeadline,
                style: TextStyle(color: Colors.white, fontSize: 20.0),
              ),
              color: Colors.red,
            ),

            // Sub headline
            Material(
              child: Text(
                statusTextSub,
                style: TextStyle(color: Colors.white, fontSize: 16.0),
              ),
              color: Colors.red,
            ),

            // Game board
            Expanded(
              child: GridView.builder(
                padding: const EdgeInsets.all(10.0),
                gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4, // 4 columns of board buttons
                    childAspectRatio: 1.0,
                    crossAxisSpacing: 9.0,
                    mainAxisSpacing: 9.0),

                // Game board loop
                itemCount: buttonsList.length,
                itemBuilder: (context, i) => SizedBox(
                  width: 100.0,
                  height: 100.0,

                    child: Material(
                      elevation: 4.0,
                      color: Colors.grey, // don't use color in any child widget of InkWell otherwise ripple effect won't be shown
                      child: InkWell(
                        splashColor: Colors.black, // give any splashColor you want
                        onTap: () => playGame(buttonsList[i]),
                        child: Image.asset(buttonsList[i].icon),
                      ),
                    ),

                ),
              ),
            ),

            // Icons
            Material(
              color: Colors.grey, // don't use color in any child widget of InkWell otherwise ripple effect won't be shown
              child: InkWell(
                splashColor: Colors.black, // give any splashColor you want
                onTap: () => showCage(),
                child: Image.asset("assets/icons/outline_pets_black_24dp.png"),
              ),
            ),

            // Reset
            RaisedButton(
              child: new Text(
                "Reset",
                style: new TextStyle(color: Colors.white, fontSize: 20.0),
              ),
              color: Colors.red,
              padding: const EdgeInsets.all(20.0),
              onPressed: resetGame,
            )
          ],
        ));
  }

有人可以帮助我吗?

0 个答案:

没有答案