Question

我需要在我的flutter应用程序中显示这种类型的线条，但不知道如何构建这种线条

如果现在有简单的背景线

Container(color: Color(0xffABEBC6 ), width: width * 0.7, height: 4,),

但是我需要在上面加上这条深色阴影线。

Answer 1

使用Stack Widget，它将在同一位置将容器添加到彼此之上

        Stack(
            children: <Widget>[
              Container(
                color: Color(0xffABEBC6),
                width: MediaQuery.of(context).size.width,
                height: 4,
              ),
              Container(
                color: Colors.green,
                width: MediaQuery.of(context).size.width * 0.2, // here you can define your percentage of progress, 0.2 = 20%, 0.3 = 30 % .....
                height: 4,
              ),
            ],
          ),

Answer 2

这是一种实现方法：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage()
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    double totalWidth = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(children: [
              Container(color: Colors.green[900], height: 4, width: 0.7 * totalWidth),
              Container(color: Color(0xffABEBC6), height: 4, width: 0.3 * totalWidth),

            ])
          ],
        ),
      ),
    );
  }
}

如果您希望获得更多动态效果，请查看LinearProgressIndicator

颤振如何显示百分比类型的容器

2 个答案: