CODEWITHSUNDEEP
flutterdart
ojha100
ojha100

Reputation: 33

How to position a container inside a column in flutter

I am newbie in flutter, I am trying to move my RaisedButton Widget to bottom left portion of screen. I tried almost every existing solution on stackoverflow but none of them worked!!

enter image description here

Above is the screenshot of where I want to place my button

and here is my code,

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.black87,
      child: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              child: Text(
                "${divStuff()}",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 120.0,
                  fontFamily:
                      'PIXymbols', //PIXymbols Digit Clocks W90 Bd from onlinewebfonts.com
                ),
              ),
              alignment: Alignment.center,
            ),
            Container(
              child: RaisedButton(
                onPressed: _launchURL,
                child: new Text('Learn More'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Upvotes: 3

Views: 6089

Answers (5)

Niteesh
Niteesh

Reputation: 3130

try this

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(home:Home()));
}
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text('demo')),
      body: Material(
        color: Colors.black87,
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: Container(
                  child: Text(
                    "1000",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 120.0,
                      fontFamily:
                      'PIXymbols', //PIXymbols Digit Clocks W90 Bd from onlinewebfonts.com
                    ),
                  ),
                  alignment: Alignment.center,
                ),
              ),
              Align(
                alignment: Alignment.bottomLeft,
                child: RaisedButton(
                  onPressed:(){},
                  child: new Text('Learn More'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Upvotes: 0

Alex Roy
Alex Roy

Reputation: 120

Why don't you use Stack widget for this type of usecase.

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.black87,
      child: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.center,
            child: Text(
              "${divStuff()}",
              style: TextStyle(
                color: Colors.white,
                fontSize: 120.0,
                fontFamily:
                'PIXymbols', //PIXymbols Digit Clocks W90 Bd from onlinewebfonts.com
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomLeft,
            child: RaisedButton(
              onPressed: _launchURL,
              child: new Text('Learn More'),
            ),
          ),
        ],
      ),
    );
  }
}

Upvotes: 0

Monasha
Monasha

Reputation: 1112

Ditch the column widget and use Stack and center the main widget, then position the rest by using Align widgets.

Material(
    color: Colors.black87,
    child: Stack(
      children: <Widget>[
        Center(
          child: Container(
            child: Text(
              "${divStuff()}",
              style: TextStyle(
                color: Colors.white,
                fontSize: 120.0,
                fontFamily: 'PIXymbols',
              ),
            ),
            alignment: Alignment.center,
          ),
        ),
        Align(
          alignment: Alignment.bottomLeft,
          child: Container(
            child: RaisedButton(
              onPressed: _launchURL,
              child: new Text('Learn More'),
            ),
          ),
        ),
      ],
    ),
  )

Upvotes: 2

Milan Poudel
Milan Poudel

Reputation: 792

Did you try mainAxisAlignment:MainAxisAlignment.end property of a column?

Column(
minAxisAlignment:MainAxisAlignment.end
child:Container()
)

Upvotes: 0

spaceSentinel
spaceSentinel

Reputation: 670

Just use the Align widget like so :

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.black87,
      child: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
          Text(
                "${divStuff()}",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 120.0,
                  fontFamily:
                      'PIXymbols', //PIXymbols Digit Clocks W90 Bd from onlinewebfonts.com
                ),
              ),
              alignment: Alignment.center,
            ),
            Align( //The align widget
            alignment : Alignment.bottomLeft, 
              child: RaisedButton(
                onPressed: _launchURL,
                child: new Text('Learn More'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Upvotes: 0

Related Questions