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

Question

我想使用Flutter在我的应用程序中引入以下图像设计。我正在使用容器和行小部件使它们内联。但是没有用。我怎样才能使它们内联在彩色填充框和文本中？

Answer 1

您可以在Row和Container小部件周围加上其他Row。然后，可以在外部Row上将MainAxisAlignment设置为MainAxisAlignment.spaceAround或MainAxisAlignment.spaceBetween。这样会在不同的选项之间创建间距。

在一个独立的示例下：

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)
    ],);
  }
}