Search code examples
flutteralignmentbottomnavigationview

set an widget alignment in flutter


Hello everyone i want to use a bottom navigator in product details file but I have two containers inside my row widget. I want to set my first container(which is Old Price and New Price Column) at the left, and also want to set my second container(which is Add to cart btn) at the right. how can I achieve this?

Here is code:

bottomNavigationBar: Material(
    elevation: 7.0,
    color: Colors.white,
    child: Container(
      height: 60.0,
      width: MediaQuery.of(context).size.width,
      color: Colors.white,

      child: Row(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(right: 10.0),
            child: Container(
              height: 40.0,
              width: MediaQuery.of(context).size.width - 280.0,
              decoration: BoxDecoration(
                color: Color(0xfff40725),

                borderRadius: BorderRadius.circular(10),
              ),

              child: Center(
                child: Text(
                  'Add to cart',
                  style: TextStyle(color: Colors.white,fontSize: 20.0,fontWeight: FontWeight.bold),
                ),

              ),

            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left:8.0),
            child: Container(
              child: Column(
                children: <Widget>[
                  Text("\$${widget.prod_old_price}",textAlign: TextAlign.left,style: TextStyle(fontSize: 18.0,color: Color(0xff989898),decoration: TextDecoration.lineThrough),),
                  Text("\$${widget.prod_price}",style: TextStyle(fontSize: 18.0,fontWeight: FontWeight.bold)),
                ],
              ),
            ),
          ),
          ],
        ),
      ),
    ),

Solution

  • Try this :

    bottomNavigationBar: Material(
        elevation: 7.0,
        color: Colors.white,
        child: Container(
          height: 60.0,
          width: MediaQuery.of(context).size.width,
          color: Colors.white,
    
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(right: 10.0),
                child: Container(
                  height: 40.0,
                  width: MediaQuery.of(context).size.width - 280.0,
                  decoration: BoxDecoration(
                    color: Color(0xfff40725),
    
                    borderRadius: BorderRadius.circular(10),
                  ),
    
                  child: Center(
                    child: Text(
                      'Add to cart',
                      style: TextStyle(color: Colors.white,fontSize: 20.0,fontWeight: FontWeight.bold),
                    ),
    
                  ),
    
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(left:8.0),
                child: Container(
                  child: Column(
                    children: <Widget>[
                      Text("\$${widget.prod_old_price}",textAlign: TextAlign.left,style: TextStyle(fontSize: 18.0,color: Color(0xff989898),decoration: TextDecoration.lineThrough),),
                      Text("\$${widget.prod_price}",style: TextStyle(fontSize: 18.0,fontWeight: FontWeight.bold)),
                    ],
                  ),
                ),
              ),
              ],
            ),
          ),
        ),