Flutter 如何使彩色填充框和文本小部件内联？

我想在我的应用程序中使用flatter实现下面的图像设计。我正在使用容器和行小部件将它们内联到一起，但没有起作用。我怎样才能使它们同时嵌入颜色填充框和文本

---

您只需在您的和小部件周围添加一行

。然后，在外部

行

上，可以将

MainAxisAlignment

设置为

MainAxisAlignment.spaceAround

或

MainAxisAlignment.spaceBetween

。这将在不同选项之间创建间距

下面是一个独立的示例：

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：脚手架(
正文：中(
孩子：排(
mainAxisAlignment:mainAxisAlignment.spaceAround，
儿童：[
彩色框（颜色：Colors.grey，文本：“预订”），
ColoredBox（颜色：Colors.green，文本：“可用”），
ColoredBox（颜色：Colors.red，文本：“选定”），
],),
),
),
);
}
}
类ColoredBox扩展了无状态小部件{
最终字符串文本；
最终颜色；
ColoredBox（{this.text，this.color}）；
@凌驾
小部件构建（构建上下文）{
返回行（子项：[
容器(
宽度：10.0，
身高：10.0，
颜色：这个，
),
Text（this.Text）
],);
}
}

谢谢@尼克拉斯。我需要空间。MainAxisAlignment.spaceAround工作顺利。@Juthi Sarker Aka，很高兴帮助您。我希望能投赞成票并接受。谢谢

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
            ColoredBox(color: Colors.grey, text: 'Booked'),
            ColoredBox(color: Colors.green, text: 'Available'),
            ColoredBox(color: Colors.red, text: 'Selected'),
          ],),
        ),
      ),
    );
  }
}

class ColoredBox extends StatelessWidget {
  final String text;
  final Color color;

  ColoredBox({this.text, this.color});

  @override
  Widget build(BuildContext context) {
    return Row(children: <Widget>[
      Container(
        width: 10.0,
        height: 10.0,
        color: this.color,
      ),
      Text(this.text)
    ],);
  }
}