CODEWITHSUNDEEP
flutterdart
Rajdeep
Rajdeep

Reputation: 2482

How to align text to the center of a parent Align widget

I'm having troubles aligning the text to the center of the box. I've tried to add FractionalOffset.center to align the column to the parent Align but it does not seem to make a difference. Since the second Align is within the first Align, I don't understand why FractionalOffset.center does not work.

Image:

enter image description here

Code:

  @override
  Widget build(BuildContext context) {
    ThemeData themeData = Theme.of(context);
    return Container(
      height: 30.0,
      child: Padding(
        padding: EdgeInsets.all(0.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Expanded(
              child: Align(
                alignment: FractionalOffset.bottomLeft,
                child: AspectRatio(
                  aspectRatio: 1.0,
                  child: Stack(
                    children: <Widget>[
                      Positioned.fill(
                        child: AnimatedBuilder(
                          animation: controller,
                          builder: (BuildContext context, Widget child) {
                            return CustomPaint(
                                painter: TimerPainter(
                              animation: controller,
                              backgroundColor: Colors.white,
                              color: themeData.indicatorColor,
                            ));
                          },
                        ),
                      ),
                      Align(
                        alignment: FractionalOffset.center,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            AnimatedBuilder(
                                animation: controller,
                                builder: (BuildContext context, Widget child) {
                                  return Text(
                                    timerString.substring(2),
                                    style: TextStyle(color: Colors.white)
                                  );
                                }),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

Upvotes: 0

Views: 372

Answers (1)

Fellipe Malta
Fellipe Malta

Reputation: 3530

I could suggest you a lot of things, but I'll make something better. I'm gonna show you how to "debug" when you get stuck like this.

You see the lastest Align component? Wrap it in a Container, pass it a color, like Colors.red so you can see where this Align really is.

After that, you could do some workaround, since your child (Text) is not behaving like you're expecting, problem is it parent's fault. Remember this analogy.

With that in mind, you could check every component's father, first, your AnimatedBuilder, you could wrap it in a Center component, or do the same trick passing a color and wrap it in a Container to check where he is positioned after all in the Stack, and so on, and so on.

If is not your AnimatedBuilder's behaviours fault, then check for his parent up in the tree till you find it.

Hope this have helped

Upvotes: 2

Related Questions