CODEWITHSUNDEEP
flutterdartalignmentwhitespacecentering
Malak
Malak

Reputation: 441

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)))),
            ),
          ],
        )

Upvotes: 0

Views: 296

Answers (2)

Vishal_VE
Vishal_VE

Reputation: 2127

body:Container(
height:MediaQuery.of(context).size.height*0.80,
 child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          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)))),
            ),
          ],
        ),
)

Upvotes: 0

PatrickMahomes
PatrickMahomes

Reputation: 934

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

Upvotes: 2

Related Questions