Search code examples
flutterdartalignmentwhitespacecentering

Problem with centering text in Column flutter


so i want to move this "pow" text there where the X is. White arrow is just an example what is happening if i instead of alignment: Alignment.bottomCenter typing alignment: Alignment.bottomRight, can someone tell me why this text has some magic area and i can't get him down there

example

 body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox.fromSize(
              size: const Size(300, 300),
              child: ClipOval(
                child: Material(
                  child: Center(
                    child: Text(
                      "Start",
                      style: GoogleFonts.overpass(
                          textStyle: const TextStyle(
                              fontSize: 30.0, fontWeight: FontWeight.w100)),
                    ),
                  ),
                  color: Colors.amber,
                ),
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: TextButton(
                  onPressed: null,
                  child: Text("pow",
                      style: GoogleFonts.oxygen(
                          textStyle: const TextStyle(color: Colors.white)))),
            ),
          ],
        )

Solution

  • Its because the Align is only aligning its child within the Column, not the entire screen.

    You can fix it like this:

    body: Stack(
      children: [
        Align(
          alignment: Alignment.center,
          child: SizedBox.fromSize(
            size: const Size(300, 300),
            child: ClipOval(
              child: Material(
                child: Center(
                  child: Text(
                    "Start",
                  ),
                ),
                color: Colors.amber,
              ),
            ),
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: TextButton(
            onPressed: null,
            child: Text(
              "pow",
            ),
          ),
        ),
      ],
    )
    

    It works because the Stack takes up the whole screen