Flutter - How can I align SizedBox along with text inside Row and Column?

inkwelll075
July 23, 2024
157 views
1 vote
2 Answers

I have sizedbox.square which align with text on design, but i can’t understand how can they be on the same level and at the same time be at the beginning of the divider. I tried a lot of things, but now my sizedbox.square is sort of in the middle, as can be seen from the screenshot, but it needs to be like in the design

The code:

 return RowExt(
      padding: Pad(
        bottom: Sizes.s12.orNullIf(isYear),
        top: Sizes.s20.orNullIf(!isYear),
      ),
      //todo: remove when alarm will ready
      children: <Widget>[
        SizedBox.square(
          dimension: Sizes.s16,
          child: DecoratedBox(
            decoration: BoxDecoration(
              gradient: context.colors.premiumSelectedPlan,
              shape: BoxShape.circle,
            ),
          ),
        ),
        Expanded(
          child: ColumnExt(
            padding: Pad(
              left: Sizes.s12,
            ),
            children: <Widget>[
              Row(
                children: [
                  Text('Annually'),
                  _SaleWidget(value: 40)
                ],
              ),
              Row(
                children: [
                  Text('test'),
                  Text('test')
                ],
              )
            ],
          ),
        ),
      ],
    );
  }
}

class _SaleWidget extends StatelessWidget {
  const _SaleWidget({required this.value});

  final int value;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: Pad(left: Sizes.s6),
      child: DecoratedBox(
        decoration: BoxDecoration(
          gradient: context.colors.premiumSale,
          borderRadius: BorderRadius.circular(Sizes.s7),
        ),
        child: TextExt(
          '-$value%',
          style: context.primaryFonts.medium11,
          padding: Pad(
            horizontal: Sizes.s8,
          ),
        ),
      ),
    );
  }
}

What i should do [

What i got:

I was trying to put it in stack, align using position and just put sized box inside row with Annually text, but in the last case the text below was pushed forward when it should be exactly under the text Annually. How to correctly place widgets so that they meet the layout requirements?

Tags: dart flutter

Answers

Try below code with Row and Column

        Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(children: [
                Column(
                  children: [
                    Row(children: [
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text("left"),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text("middle"),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text("right"),
                      )
                    ]),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text("bottom1"),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text("bottom2"),
                    ),
                  ],
                ),
              ]),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Hello, World!'),
              )
            ],
          ),

Try below code I have create same UI like your expected.

Container(
        margin: EdgeInsets.all(10),
        padding: EdgeInsets.all(10),
        color: Colors.black,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Icon(
                        Icons.circle,
                        color: Colors.white,
                      ),
                    ),
                    Column(
                      children: [
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text(
                            "Annual",
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                        SizedBox(height: 5),
                        Text(
                          "Test",
                          style: TextStyle(color: Colors.white),
                        ),
                        SizedBox(height: 5),
                        Text(
                          "Test",
                          style: TextStyle(color: Colors.white),
                        ),
                      ],
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Icon(
                        Icons.circle,
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    'Test text on the same line',
                    style: TextStyle(color: Colors.white),
                  ),
                )
              ],
            ),
            Divider(color: Colors.white,),
            SizedBox(height: 80),
            // add your other widgets below if you want
          ],
        ),
      ),

Result –

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – How can I align SizedBox along with text inside Row and Column?

Answers