CODEWITHSUNDEEP
flutter
jacace
jacace

Reputation: 259

Column items not aligning to center

I have a ButtonTheme and an InkWell (inside a Column) not centered. I tried with CrossAxisAlignment.center a padding left but still not taking it. Any suggestion?

body: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[

        ButtonTheme(
            minWidth: 300.0,
            child: RaisedButton(
              shape: new RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(18.0),
                  side: BorderSide(color: Colors.green)),
              onPressed: () {},
              color: Colors.green,
              textColor: Colors.white,
              child: Text("Sample Text", style: TextStyle(fontSize: 14)),
            )),

        InkWell(
          onTap: () {},
          child: Ink.image(
            image: AssetImage('assets/sampleimg.jpg'),
            width: 280,
            height: 50,
            padding: EdgeInsets.only(left: 60),
          ),
        ),

enter image description here

Thanks,

Javier Caceres

Upvotes: 1

Views: 61

Answers (2)

Mohammed Alfateh
Mohammed Alfateh

Reputation: 3524

Since the Column doesn't have a fixed width or height you can wrap it with a Container and give it the height and the width of the screen. you can get it by these two lines:

final deviceHeight = MediaQuery.of(context).size.height;
final deviceWidth = MediaQuery.of(context).size.width;

then you can use center widget or crossAxisAlignment or even mainAxisAlignment because now the Column knows the height and the width that it has.

Upvotes: 0

Nithin Sai
Nithin Sai

Reputation: 1013

Try wrapping your Column widget with a Center widget

body: Center(
      child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[

        ButtonTheme(
            minWidth: 300.0,
            child: RaisedButton(
              shape: new RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(18.0),
                  side: BorderSide(color: Colors.green)),
              onPressed: () {},
              color: Colors.green,
              textColor: Colors.white,
              child: Text("Sample Text", style: TextStyle(fontSize: 14)),
            )),

        InkWell(
          onTap: () {},
          child: Ink.image(
            image: AssetImage('assets/sampleimg.jpg'),
            width: 280,
            height: 50,
            padding: EdgeInsets.only(left: 60),
          ),
        ),
      ),

Please tell if it works out!!!

Upvotes: 1

Related Questions