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

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