Flutter - Space item in column

Ken
June 23, 2023
206 views
1 vote
2 Answers

I want to space out the Column on the right side if the image to look the same as the example bur I have tried all 3 of the spaceBetween, spaceEvenly and spaceAround but none seem to work.

This is the code I wrote for the item

Widget foodItemCard(BuildContext context, FoodItem prod) {
  return Padding(
    padding: const EdgeInsets.all(8.0),
    child: Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10), color: Colors.white),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 10, left: 10, bottom: 10),
            child: Image(
              image: AssetImage(prod.imageAddress),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(prod.prodName),
                sauceItemList(context, prod.sauceItems),
                Text('${prod.prodPrice} VND')
              ],
            ),
          ),
        ],
      ),
    ),
  );
}

Widget sauceItemList(BuildContext context, List<SauceItem> items) {
  return Column(
    children: List.generate(
        items.length,
        (index) => Row(
              children: [
                Container(
                  height: 15,
                  width: 15,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle, color: Color(items[index].color)),
                ),
                const SizedBox(
                  width: 10,
                ),
                Text(
                  items[index].prodName,
                  style: TextStyle(color: Color(items[index].color)),
                )
              ],
            )),
  );
}

Tags: flutter

Answers

The Row In Food Item Card change its mainAxisAlignment to adjust accordingly. for example to make it center try code below

 Widget foodItemCard(BuildContext context) {
return Container(
  margin: const EdgeInsets.only(top: 10, left: 10, right: 10),
  decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(10), color: Colors.grey),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Padding(
        padding: const EdgeInsets.only(top: 10, left: 10, bottom: 10),
        child: Container(
          width: 150,
          height: 100,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: Colors.amberAccent),
        ),
      ),
      Padding(
        padding: const EdgeInsets.only(left: 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('sampleProd'),
            sauceItemList(context),
            Text('${200} VND')
          ],
        ),
      ),
    ],
  ),
);

}

— output be like

You have to make use of Expanded or Flexible widget to let widgets take up space according to flex value.

Complete Code : –

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Box(),
    );
  }
}

class Box extends StatefulWidget {
  const Box({super.key});

  @override
  State<Box> createState() => _BoxState();
}

class _BoxState extends State<Box> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            for (int i = 0; i < 3; i++) ...[
              Row(
                children: [
                  Expanded(
                    flex: 3,
                    child: Container(
                      color: Colors.red[200],
                      height: 150,
                    ),
                  ),
                  const SizedBox(
                    width: 20,
                  ),
                  const Expanded(child: Text("Text")),
                ],
              ),
              const SizedBox(
                height: 20,
              ),
            ]
          ],
        ),
      ),
    ));
  }
}

Output : –

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – Space item in column

Answers