Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter positioning widgets in Column

enter image description here

I am trying to set an image in the center of Column, and the Text at the bottom of the image, by wrapping Image and Text in the Column widget and placing it in the Center widget.

Unfortunately, it centers the Column and makes Image to be above the center of the screen.

How can I solve it?

My current code:

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Theme.of(context).primaryColor),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.asset(ImagePaths.newLogoLogin),
            Text(Strings.beALocal)
          ],
        ),
      ),
    );
  }
like image 251
Artyom Okun Avatar asked Mar 05 '23 16:03

Artyom Okun


2 Answers

This can be achieved using the Expanded widget:

@override
Widget build(BuildContext context) {
  return Container(
    decoration: BoxDecoration(color: Theme.of(context).primaryColor),
    child: Column(
      children: [
        Spacer(),
        Image.asset(ImagePaths.newLogoLogin),
        Expanded(
          Column(
             children: [ Text(Strings.beALocal) ],
             mainAxisAlignment: MainAxisAlignment.start
          )
        )
      ],
    ),
  );
}
like image 192
gq3 Avatar answered Mar 16 '23 23:03

gq3


You could use a Stack with a Positioned Text widget inside it.

Full example:

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Test")),
        body: Stack(children: [Placeholder(), Test()]),
      ),
    );
  }
}

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        alignment: AlignmentDirectional.bottomCenter,
        overflow: Overflow.visible,
        children: <Widget>[
          Container(
            width: 150,
            height: 150,
            color: Colors.blue,
          ),
          Positioned(child: Text("Some text"), bottom: -25),
        ],
      ),
    );
  }
}

Screenshot

like image 32
Jordan Davies Avatar answered Mar 16 '23 21:03

Jordan Davies