Question 177643 in Flutter Question posted in
The official Flutter documentation can be found here.

Why is Column in Row causing layout issues in Flutter?

Facing conflicts while using Column widget in Row.

Hi, I am implementing below mentioned design in flutter but something went wrong mentioned in below image.

I don’t want to use any external package for learning purpose. Thanks for your help in advance.

Expectations:-
Expected

Reality:-
Messed up layout

below are the code snippet, which I am using now.

upload_screen.dart

import 'package:flutter/material.dart';

class StepProgressBar extends StatelessWidget {
  const StepProgressBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Row(
      // mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
        children: [
      StepWithPlaceHolder(label: "1", title: "Choose File"),
      Expanded(child: Divider(thickness: 7,height: 5,)),
      StepWithPlaceHolder(label: "2", title: "Finish")
    ]);
  }
}

class StepWithPlaceHolder extends StatelessWidget {
  final String label;
  final String title;

  const StepWithPlaceHolder(
      {Key? key, required this.label, required this.title})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: 55,
          height: 55,
          decoration: BoxDecoration(
            border: Border.all(width: 2, style: BorderStyle.none),
            shape: BoxShape.circle,
            color: Colors.red,
          ),
          child: Center(
            child: Text(
              label,
              style: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 22,
                  color: Colors.white),
            ),
          ),
        ),
        Text(
          title,
          style: const TextStyle(
            fontWeight: FontWeight.w800,
            fontSize: 20,
            color: Colors.black,
          ),
        ),
      ],
    );
  }
}
}
Tags:

2

Answers


  1. 0

    Wrap your Row widget with SizedBox with the needed height.

    SizedBox(
    height: 80,
    child: const Row(
           mainAxisAlignment: MainAxisAlignment.center,
           crossAxisAlignment: CrossAxisAlignment.center,
           children: [
           //....
           Padding(
                padding: EdgeInsets.only(right: 10, bottom: 10), // for padding around Divider
                child:Divider(
                      thickness: 7,
                      height: 5,
                        ),
            ),
           // ....
           ],
        ),
    ),

    OUTPUT:

    See Output

    Note: Or wrap With a Container instead of SizedBox if you want to add some margin around it.

    Login or Signup to reply.
  2. 0

    I have tried to make it dynamic so you will just need to change list in order to manage your views and here is code

    import 'package:flutter/material.dart';

class StepProgressBar extends StatelessWidget {
  const StepProgressBar({Key? key}) : super(key: key);

  final list = const [{"label":"1","title":"Choose File"},{"label":"2","title":"Finish"}];

  @override
  Widget build(BuildContext context) {
    var widgets = <Widget>[];
    var textWidgets = <Widget>[];
    for(int counter=0;counter<list.length;counter++){
      var item = list[counter];
      if(counter != 0){
        textWidgets.add(Text(
          item["title"] ?? "",
          style: const TextStyle(
            fontWeight: FontWeight.w800,
            fontSize: 20,
            color: Colors.black,
          ),
        ));
        widgets.add(
              Expanded(child: Divider(thickness: 7,height: 5,)),
        );
        widgets.add(StepWithPlaceHolder(label: item["label"] ?? "",));
      }else{
        textWidgets.add(Text(
          item["title"] ?? "",
          style: const TextStyle(
            fontWeight: FontWeight.w800,
            fontSize: 20,
            color: Colors.black,
          ),
        ));
        widgets.add(StepWithPlaceHolder(label: item["label"] ?? "", ));
      }
    }
    return Scaffold(
      body: Container(
        margin: EdgeInsets.symmetric(horizontal: 10),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: widgets
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: textWidgets,
            )
          ],
        ),
      ),
    );
  }
}

class StepWithPlaceHolder extends StatelessWidget {
  final String label;

  const StepWithPlaceHolder(
      {Key? key, required this.label})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: 55,
          height: 55,
          margin: EdgeInsets.symmetric(horizontal: 10.0),
          decoration: BoxDecoration(
            border: Border.all(width: 2, style: BorderStyle.none),
            shape: BoxShape.circle,
            color: Colors.red,
          ),
          child: Center(
            child: Text(
              label,
              style: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 22,
                  color: Colors.white),
            ),
          ),
        ),
      ],
    );
  }
}

    Code is not much optimized but you can refer it

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search