CODEWITHSUNDEEP
flutterdart
Zubair Amjad
Zubair Amjad

Reputation: 761

Align widget to the top part of the screen

I want to be able to align my widget to the top of the screen.

What my code is doing right now is that it starts from the center which is this portion of the code:

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Second Route"),
        ),
        body: Center(
          child: BouncingBall(),
        ));
  }
}

I assume Body: Center() is centering my widget, is there a something that would align the widget to the top?

Upvotes: 1

Views: 720

Answers (2)

Ali Kamal
Ali Kamal

Reputation: 751

you can use Align widget with Alignment.topCenter for the alignment

Align(
    alignment: Alignment.topCenter,
    child: Widget(), // replace 'Widget' with your widget
)

in your example

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Second Route"),
        ),
        body: Align(
          alignment: Alignment.topCenter,
          child: BouncingBall(),
        ));
  }
}

Upvotes: 4

kohjakob
kohjakob

Reputation: 788

You could use a Row with mainAxisAlignment: MainAxisAlignment.center like so:

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Second Route"),
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BouncingBall(),
          ],
        ),
    );
  }
}

Upvotes: 1

Related Questions