Reputation: 407

Fill up vertical space in a column - Flutter

I want to position the 'price' just below the 'item name' and the 'add button' should be at the bottom centre of the picture.

I have used the Stack widget to place the 'add button' and the picture on top of each other. Is there a way to position this?

I tried to use mainAxisAlignment.start to place the 'price' below the 'item name' in my column but it doesn't seem to work.

        ListView.builder(
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            itemBuilder: (ctx, i) => restaurantItems[i].quantity <= 0
                ? Center()
                : Padding(
                    padding: const EdgeInsets.only(left: 15, bottom: 8, top: 1),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        // ITEM NAME
                        Padding(
                          padding: const EdgeInsets.only(left: 10, top: 10),
                          child: Row(
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                '${restaurantItems[i].name}',
                                style: TextStyle(
                                    fontSize: 17,
                                    color: kTextColor,
                                    fontWeight: FontWeight.w700),
                              ),

                              //Spacer(),

                              // 'ADD' BUTTON CONTAINER
                              Padding(
                                padding: const EdgeInsets.only(right: 20),
                                child: Stack(
                                  children: [
                                    ClipRRect(
                                      borderRadius: BorderRadius.circular(8),
                                      child: Image.network(
                                        restaurantItems[i].imageUrl,
                                        height: size.width * 0.28,
                                        width: size.width * 0.26,
                                        fit: BoxFit.cover,
                                      ),
                                    ),
                                    Container(
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(8),
                                        color: Colors.black87,
                                      ),
                                      child: Padding(
                                        padding: const EdgeInsets.only(
                                            left: 9,
                                            top: 3,
                                            right: 5,
                                            bottom: 3),
                                        child: InkWell(
                                          splashColor: Colors.white,
                                          onTap: () {
                                            print(restaurantItems[i].name);
                                            cart.addItem(
                                              restaurantItems[i].id,
                                              restaurantItems[i].name,
                                              restaurantItems[i].price,
                                              restaurant,
                                            );
                                          },
                                          child: Row(
                                            children: [
                                              Text(
                                                'ADD',
                                                style: TextStyle(
                                                  color: Colors.white,
                                                ),
                                              ),
                                              Icon(
                                                Icons.add,
                                                color: Colors.white,
                                                size: 17,
                                              ),
                                            ],
                                          ),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(left: 10, bottom: 11),
                          child: Text(
                            '₹${restaurantItems[i].price}',
                            style: TextStyle(
                                fontSize: 15,
                                color: kTextColor,
                                fontWeight: FontWeight.w400),
                          ),
                        ),
                      ],
                    ),
                  ),
            itemCount: restaurantItems.length,
          );

Thanks for your time and support.

Upvotes: 1

Answers (4)

Arslan Kaleem

Reputation: 1608

All your need is to create Column Widget inside Row and add Text Widget and Padding Widget of Price inside that Columnn. Here is your modified code

ListView.builder(
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            itemBuilder: (ctx, i) => restaurantItems[i].quantity <= 0
                ? Center()
                : Padding(
                    padding: const EdgeInsets.only(left: 15, bottom: 8, top: 1),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        // ITEM NAME
                        Padding(
                          padding: const EdgeInsets.only(left: 10, top: 10),
                          child: Row(
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                            Column(
                             children:[
                              Text(
                                '${restaurantItems[i].name}',
                                style: TextStyle(
                                    fontSize: 17,
                                    color: kTextColor,
                                    fontWeight: FontWeight.w700),
                              ),
                              Padding(
                                padding: const EdgeInsets.only(left: 10, bottom: 11),
                                child: Text(
                                '₹${restaurantItems[i].price}',
                                style: TextStyle(
                                fontSize: 15,
                                color: kTextColor,
                                fontWeight: FontWeight.w400),
                          ),
                        ),
                       ],
                      ),

                              //Spacer(),

                              // 'ADD' BUTTON CONTAINER
                              Padding(
                                padding: const EdgeInsets.only(right: 20),
                                child: Stack(
                                  children: [
                                    ClipRRect(
                                      borderRadius: BorderRadius.circular(8),
                                      child: Image.network(
                                        restaurantItems[i].imageUrl,
                                        height: size.width * 0.28,
                                        width: size.width * 0.26,
                                        fit: BoxFit.cover,
                                      ),
                                    ),
                                    Container(
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(8),
                                        color: Colors.black87,
                                      ),
                                      child: Padding(
                                        padding: const EdgeInsets.only(
                                            left: 9,
                                            top: 3,
                                            right: 5,
                                            bottom: 3),
                                        child: InkWell(
                                          splashColor: Colors.white,
                                          onTap: () {
                                            print(restaurantItems[i].name);
                                            cart.addItem(
                                              restaurantItems[i].id,
                                              restaurantItems[i].name,
                                              restaurantItems[i].price,
                                              restaurant,
                                            );
                                          },
                                          child: Row(
                                            children: [
                                              Text(
                                                'ADD',
                                                style: TextStyle(
                                                  color: Colors.white,
                                                ),
                                              ),
                                              Icon(
                                                Icons.add,
                                                color: Colors.white,
                                                size: 17,
                                              ),
                                            ],
                                          ),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                        
                      ],
                    ),
                  ),
            itemCount: restaurantItems.length,
          );

Upvotes: 0

Omar Fayad

Reputation: 1793

I tested the following code, tune it as you need:

         Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // control the split ratio here
                Expanded(
                  flex: 2,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'restaurant name',
                        style: TextStyle(
                            fontSize: 17,
                            color: Colors.black,
                            fontWeight: FontWeight.w700),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(left: 10, bottom: 11),
                        child: Text(
                          '₹ 5',
                          style: TextStyle(
                              fontSize: 15,
                              color: Colors.black,
                              fontWeight: FontWeight.w400),
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(width: 10.0),
                Expanded(
                  // control the split ratio here
                  flex: 2,
                  child: Column(
                    children: [
                      // 'ADD' BUTTON CONTAINER
                      Padding(
                        padding: const EdgeInsets.only(right: 20),
                        child: Stack(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(8),
                              child: Image.network(
                                'https://picsum.photos/id/1/200/300',
                                height:
                                    MediaQuery.of(context).size.width * 0.28,
                                width:
                                    MediaQuery.of(context).size.height * 0.26,
                                fit: BoxFit.cover,
                              ),
                            ),
                            Positioned.fill(
                              bottom: 0.0,
                              child: Align(
                                alignment: Alignment.bottomCenter,
                                child: Container(
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(8),
                                    color: Colors.black87,
                                  ),
                                  //try to use ElevatedButton.icon instead
                                  child: Padding(
                                    padding: const EdgeInsets.only(
                                        left: 9, top: 3, right: 5, bottom: 3),
                                    child: InkWell(
                                      splashColor: Colors.white,
                                      onTap: () {},
                                      child: Row(
                                        mainAxisSize: MainAxisSize.min,
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: [
                                          Text(
                                            'ADD',
                                            style: TextStyle(
                                              color: Colors.white,
                                            ),
                                          ),
                                          Icon(
                                            Icons.add,
                                            color: Colors.white,
                                            size: 17,
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),

Upvotes: 1

Amit Singh

Reputation: 733

Break your first part of row in column And add column properties spaceevenly and then in 2nd column put your text widget in center .

Upvotes: 0

Ehsan Askari

Reputation: 891

You could use something like this:

          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Column(
                children: [
                  Text('Title'),
                  Text('Price'),
                ],
              ),
              Stack(
                children: [
                  ImageWiget(
                  ),
                  Positioned.fill(
                      child: Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Text('Add Button'),
                    ],
                  ))
                ],
              )
            ],
          ),

Upvotes: 1

Fill up vertical space in a column - Flutter

Answers (4)

Related Questions