Question

我不知道该怎么做的部分是带有This is a text（包括背景）的部分：

也许不清楚，但是3种背景颜色不同。如果真的很难制作，我不会介意使用相同的颜色。

我已经将其余的UI正常工作了，

Widget _generateOption(context, option) {
    return GestureDetector(
      onTap: () {
        print(option["name"]);
        _gotoDetailsPage(context, option["page"]);
      },
      child: Container(
        margin: option["margin"],
        alignment: Alignment(0.0, 0.0),
        color: hexToColor(option["color"]),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Hero(
              tag: option["name"],
              child: Icon(
                option["icon"],
                size: 75.0,
                semanticLabel: 'Select Teams',
              ),
            ),
            Text(
              option["name"],
              style: TextStyle(fontSize: 20.0),
            ),
          ],
        ),
      ),
    );
  }

  Widget _myScreenOptions(BuildContext context) {
    const options = [
      {
        "name": "Teams",
        "page": "/teams",
        "icon": Icons.people,
        "color": "#1d4554",
        "margin": const EdgeInsets.only(right: 2.5, bottom: 2.5),
      },
      {
        "name": "Sets",
        "page": "/sets",
        "icon": Icons.content_copy,
        "color": "#249B8D",
        "margin": const EdgeInsets.only(left: 2.5, bottom: 2.5),
      },
      {
        "name": "Modes",
        "page": "/game-settings",
        "icon": Icons.videogame_asset,
        "color": "#E7C26A",
        "margin": const EdgeInsets.only(right: 2.5, top: 2.5),
      },
      {
        "name": "Options",
        "page": "/options",
        "icon": Icons.settings,
        "color": "#F3A061",
        "margin": const EdgeInsets.only(left: 2.5, top: 2.5),
      },
    ];
    return Column(
      children: <Widget>[
        Flexible(
          flex: 2,
          child: Row(
            children: <Widget>[
              Flexible(flex: 2, child: _generateOption(context, options[0])),
              Flexible(flex: 2, child: _generateOption(context, options[1])),
            ],
          ),
        ),
        Flexible(
          flex: 2,
          child: Row(
            children: <Widget>[
              Flexible(flex: 2, child: _generateOption(context, options[2])),
              Flexible(flex: 2, child: _generateOption(context, options[3])),
            ],
          ),
        ),
      ],
    );
  }

可以做这样的事情吗？归档此类设计的最佳小部件是什么？由于我是Flutter的新手，是否有图书馆可以进行更专业的设计？

Flutter UI：边框上的圆形文本

0 个答案: