CODEWITHSUNDEEP
androidfluttercontainers
Kavinda Lochana
Kavinda Lochana

Reputation: 125

Container text and icons alignment- need to align this icon to right of this container

I need to make this favourite icon to the right of the container. I can use padding but is it ok? I mean is it going to work with all devices. Is there any solid way to align these 3 containers? I made a list view because I am adding more stuff like this one. can you guys help me with this?

Here is the image

Here is my code

class _OrdersState extends State<Orders> {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: SafeArea(
        child: Stack(
          children: [
            Background(),
            Positioned(
              top: 10,
              left: 5,
              child: SizedBox(
                // width: 10,
                // height: 10,
                child: Container(
                  color: Colors.transparent,
                  child: IconButton(
                    icon: Icon(Icons.arrow_back),
                    color: Colors.white,
                    //go back
                    onPressed: () => Navigator.of(context).pop(),
                  ),
                ),
              ),
            ),
            Positioned(
              top: 90,
              left: 22,
              right: 22,
              child: SizedBox(
                width: 350,
                height: 900,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(10),
                      topRight: Radius.circular(10),
                    ),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.5),
                        spreadRadius: 3,
                        blurRadius: 7,
                      ),
                    ],
                  ),
                  child: Row(
                    children: [
                      Container(
                        color: Colors.blue,
                        margin: EdgeInsets.all(2),
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text(
                            '3:32',
                            style: TextStyle(fontSize: 20),
                          ),
                        ),
                      ),
                      Container(
                        color: Colors.red,
                        child: Text(
                          'Order 1',
                          style: TextStyle(fontSize: 20),
                        ),
                      ),
                      Container(
                        color: Colors.amber,
                        child: Icon(Icons.favorite),
                      )
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Upvotes: 1

Views: 154

Answers (1)

dm_tr
dm_tr

Reputation: 4783

In the Row try to use and Expanded widget like this

Row(
    children: [
      Expanded(
        child: Row(
          children: [
            Container(
              color: Colors.blue,
              margin: EdgeInsets.all(2),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  '3:32',
                  style: TextStyle(fontSize: 20),
                ),
              ),
            ),
            Container(
              color: Colors.red,
              child: Text(
                'Order 1',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ],
        ),
      ),
      Container(
        color: Colors.amber,
        child: Icon(Icons.favorite),
      )
    ],
  )

Upvotes: 1

Related Questions