CODEWITHSUNDEEP
user-interfacedartflutter
Joseph Arriaza
Joseph Arriaza

Reputation: 13744

Set column width in flutter

I need to set a Column width in flutter, I have to do a layout with 3 sections, one should be 20% of the screen, the other one 60% and the last one 20%. I know that those 3 columns should be into a row, but I don't know a way to set the size, when I do that, the 3 columns take the same size.

I will appreciate any feedback.

Upvotes: 110

Views: 223624

Answers (5)

Pnemonic
Pnemonic

Reputation: 1825

Here is my simple solution:

SizedBox(
  width: double.maxFinite,
  child: Column(
    children: [

Upvotes: 3

Mia loha.dev
Mia loha.dev

Reputation: 571

Just wrap it with a Row

Row( // this row has full width
  children: [
    Column(
      children: [...]
    )
  ])

Upvotes: 7

artronics
artronics

Reputation: 1496

This is not an answer to the original question but demonstrating a similar use case. I have a container and I want to expand the width until certain value. If width gets bigger I want container to be always in the middle. This is useful when rendering forms especially on web and desktop applications.

enter image description here

import 'package:flutter/material.dart';
import 'dart:math' as math;

var index = 0;

Widget buildContainer() { // Just a placeholder with random colour
  index++;
  return Container(
    height: 60,
    margin: const EdgeInsets.only(right: 5),
    color: Colors.primaries[math.Random().nextInt(Colors.primaries.length)],
    child: Text("$index"),
  );
}

Widget containers() {
  return Row(
    children: [
      Expanded(child: buildContainer(),
      flex: 2), // <- Control the width of each item. See other answers. 
      Expanded(child: buildContainer(), flex: 3,)
    ],
  );
}
class FormLayout extends StatelessWidget {
  const FormLayout({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(     //<- Centre the form
      child: SizedBox(
        width: 400,    //<- Limit the width
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [containers()]),
      ),
    );
  }
}

Upvotes: 1

Dinesh Balasubramanian
Dinesh Balasubramanian

Reputation: 21728

Instead of hard-coding the size, I would suggest using Flex like

Row(
      children: <Widget>[
        Expanded(
          flex: 2, // 20%
          child: Container(color: Colors.red),
        ),
        Expanded(
          flex: 6, // 60%
          child: Container(color: Colors.green),
        ),
        Expanded(
          flex: 2, // 20%
          child: Container(color: Colors.blue),
        )
      ],
    )

Which will produce like below,

enter image description here

Upvotes: 279

CopsOnRoad
CopsOnRoad

Reputation: 267534

Limiting the width of a Column could be

  1. Limiting the width of Column itself, use SizedBox

    SizedBox(
  width: 100, // set this
  child: Column(...),
)

2 (A). Limiting width of children inside Column, without hardcoding values

Row(
  children: <Widget>[
    Expanded(
      flex: 3, // takes 30% of available width 
      child: Child1(),
    ),
    Expanded(
      flex: 7, // takes 70% of available width  
      child: Child2(),
    ),
  ],
)

2 (B). Limiting width of children inside Column, with hardcoding values.

Row(
  children: <Widget>[
    SizedBox(
      width: 100, // hard coding child width
      child: Child1(),
    ),
    SizedBox(
      width: 200, // hard coding child width
      child: Child2(),
    ),
  ],
)

Upvotes: 65

Related Questions