如何在颤动中创建带有文本行的颜色条

Question

我如何使用颤振在屏幕截图中创建条形显示。下面[在此处输入图片说明][1]

[1]：https://i.stack.imgur.com/dXKsm.png`enter 此处代码`

Row(
                  children: [
                    Expanded(
                          child: SizedBox(
                          child: Text("CONTACT US",
                          style: TextStyle(color: Colors.white),
                          ),
                      ),
                    ),
                    Expanded(
                        child: Padding(
                          padding: const EdgeInsets.only(left: 30.0),
                          child: SizedBox(
                          child: Text("SOCIAL MEDIA", style: TextStyle(color: Colors.white),),
                      ),
                        )
                    ),
                    Expanded(
                        child: Padding(
                          padding: const EdgeInsets.only(left: 30.0),
                          child: SizedBox(
                          child: Text("NEWSLETTER", style: TextStyle(color: Colors.white),),
                      ),
                        )
                    ),
                  ],
                ),

Answer 1

您可以尝试类似的东西并根据您的目的和颜色进行调整：

class Sample extends StatefulWidget {
  @override
  _SampleState createState() => _SampleState();
}

class _SampleState extends State<Sample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text('sample'),
      ),
      body: Container(
        height: 200,
        width: 2000,
        color: Color(0xff808080),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Contact Us'),
                Row(children: [
                  Icon(Icons.phone),
                  Text('phone')]),
                Row(children: [
                  Icon(Icons.mail),
                  Text('info@test.it')]),
                Row(children: [
                  Icon(Icons.map_outlined),
                  Text('unavailable')]),
              ],
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Contact Us'),
                Icon(Icons.wrap_text_rounded),
                Icon(Icons.point_of_sale),
              ],
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Newsletter'),
                Text('Susbcribe'),
              ],
            ),
          ],
        ),
      )
    );
  }
}