CODEWITHSUNDEEP
flutter
Sachu
Sachu

Reputation: 187

How to Bottom Center a TextField in Flutter

I don't understand why the widget isn't being placed at the bottom of the screen, from my understanding the line " crossAxisAlignment: CrossAxisAlignment.end" should place it there. Can anyone offer help? 

import 'package:flutter/material.dart';

class AddButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.end, //why isn't this placing the widget at the end
          children: <Widget>[
            Expanded(
              child: TextField(

              )
            )
          ],
        )
      )
    );
  }
}

Upvotes: 0

Views: 2372

Answers (1)

Igor Kharakhordin
Igor Kharakhordin

Reputation: 9903

Because Row's height equals height of TextField and you're trying to align its content to the bottom. You can see it by wrapping it in colored container:

1

Instead of aligning inside of Row, you need to align the Row itself inside of parent Container:

    return Scaffold(
      body: Container(
        alignment: Alignment.bottomCenter, // align the row
        padding: EdgeInsets.all(16.0),
        child: Row(
          children: <Widget>[
            Flexible(
              child: TextField(
              )
            )
          ],
        )
      )
    );

2

Upvotes: 1

Related Questions