CODEWITHSUNDEEP
flutterdartandroid-widgetflutter-layout
Ganesh Bhat
Ganesh Bhat

Reputation: 256

Is there any way i can display LinearProgress on top of existing widgets?

I want to display the progress done on top of my Row widget. like this:

enter image description here

(ignore the arrow).

Currently, I have added linear progress below my Row. like this:

enter image description here

is there any way I can achieve this? This is my current code:

Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Column(
                    children: <Widget>[
                      Text("Raised",style: TextStyle(fontSize: 18),),
                      SizedBox(height: 10,),
                      Text(raisedAmount.toString()+"₹",style: TextStyle(fontSize: 26,fontWeight: FontWeight.bold),)                          
                    ],
                  ),
                  Column(
                    children: <Widget>[
                      Text("Target",style: TextStyle(fontSize: 18),),
                      SizedBox(height: 10,),
                      Text(targetAmount.toString()+"₹",style: TextStyle(fontSize: 26,fontWeight: FontWeight.bold),)                         
                    ],
                  )
                ],
              ),
LinearProgressIndicator(
              value: progress,
              backgroundColor: Colors.grey[200],
              valueColor: AlwaysStoppedAnimation<Color>(
                Colors.deepOrange[200],
                ),                    
            ),

Upvotes: 0

Views: 199

Answers (1)

Asbah Riyas
Asbah Riyas

Reputation: 986

You can use Stack to accomplish this...

Stack(
      children:[ 
        LinearProgressIndicator(minHeight: 60,
              value: progress,
              backgroundColor: Colors.grey[200],
              valueColor: AlwaysStoppedAnimation<Color>(
                Colors.deepOrange[200],
                ),                    
            ),
               Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Column(
                      children: <Widget>[
                        Text("Raised",style: TextStyle(fontSize: 18),),
                        SizedBox(height: 10,),
                        Text(raisedAmount.toString()+"₹",style: TextStyle(fontSize: 26,fontWeight: FontWeight.bold),)                          
                      ],
                    ),
                    Column(
                      children: <Widget>[
                        Text("Target",style: TextStyle(fontSize: 18),),
                        SizedBox(height: 10,),
                        Text(targetAmount.toString()+"₹",style: TextStyle(fontSize: 26,fontWeight: FontWeight.bold),)                         
                      ],
                    )
                 ],
              ),
         ]
    );

Upvotes: 2

Related Questions