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

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

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: what i did

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:

2

Answers


  1. 0

    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!'),
              )
            ],
          ),
    Login or Signup to reply.
  2. 0

    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 – image

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

Back To Top
Search