CODEWITHSUNDEEP
flutter
Umaiz Khan
Umaiz Khan

Reputation: 1227

Flutter how to show percentage type container

I need to show this type of line in my flutter app but dont get any idea how ill build this

enter image description here

If have simple background line now 

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

But i need add this thick dark shade line on that.

Upvotes: 1

Views: 1588

Answers (2)

osaxma
osaxma

Reputation: 3014

This is one way to do it:

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),

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

If you want something more dynamic, check out LinearProgressIndicator

Upvotes: 1

Jitesh Mohite
Jitesh Mohite

Reputation: 34250

Use Stack Widget which will add container above each other at the same place

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

Upvotes: 2

Related Questions