CODEWITHSUNDEEP
flutter
Shahnaz Raheem
Shahnaz Raheem

Reputation: 228

Flutter column not center in vertical

I need to center my column vertically i try with mainAxisAlignment and crossAxisAlignment but dont know why its not coming in center. Here is my code

return Container(
      height: stackHeight * 0.4,
      decoration: BoxDecoration(
          color: Color(0xff404040),
          borderRadius: BorderRadius.only(topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0))
      ),
      child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(

            padding: EdgeInsets.only(top: 10, left: 10, right:10,
              bottom: MediaQuery.of(context).viewInsets.bottom + 10 ,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: <Widget>[
                TextField(
                  maxLength: 56,
                  style: TextStyle(
                    color: Colors.white,
                  ),
                 textAlign: TextAlign.center,
                  decoration: InputDecoration(
                    counterText: '',
                      labelText: 'Would Question',
                      labelStyle: TextStyle(
                          color: Colors.blue
                      ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.blue),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.blue),
                    ),
                  ),
                  onSubmitted: (_) => _submitData(),
                ),
                TextField(
                  maxLength: 56,
                  style: TextStyle(
                    color: Colors.white,
                  ),
                  textAlign: TextAlign.center,
                  decoration: InputDecoration(
                    counterText: '',
                      labelText: 'Rather Question',
                      labelStyle: TextStyle(
                          color: Colors.red
                      ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.red),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.red),
                    ),
                  ),
                  keyboardType: TextInputType.number,
                  onSubmitted: (_) => _submitData(),
                ),

                RaisedButton(onPressed: () {
                  _submitData();

                }, child: Text('Add Question', style: TextStyle(
                    color: Colors.white
                ),),color: Theme.of(context).primaryColor,
                ),

              ],
            ),
          ),
          ],
        ),
      ),
    );

enter image description here Also, don't know on border-radius its showing white corners as you see in image emulator I need to remove this white also.

also, When i am opening the keyboard its cover the whole bottomsheet nothing is showing also the yellow line error showing is it possible when keyboard open the bottom shettup move on up side

Upvotes: 0

Views: 77

Answers (3)

rameez khan
rameez khan

Reputation: 359

You can give a transparent background so it will remove the white corners. Color.fromRGBO(255, 0, 0, 0.5) Also can wrap center with Singlescroll widget. As mention in the above answer.

Upvotes: 2

Umaiz Khan
Umaiz Khan

Reputation: 1227

Wrap your SingleChildScrollView widget with Center widget. And for white corner you can wrap your main container with other container and set color: new Color.fromRGBO(255, 0, 0, 0.5),

Working Code here 

   return Container(
      color: new Color.fromRGBO(255, 0, 0, 0.5),
      child: Container(
        height: stackHeight * 0.4,
        decoration: BoxDecoration(
            color: Color(0xff404040),
            borderRadius: BorderRadius.only(topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0))
        ),
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(

                  padding: EdgeInsets.only(top: 10, left: 10, right:10,
                    bottom: MediaQuery.of(context).viewInsets.bottom + 10 ,
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      TextField(
                        maxLength: 56,
                        style: TextStyle(
                          color: Colors.white,
                        ),
                        textAlign: TextAlign.center,
                        decoration: InputDecoration(
                          counterText: '',
                          labelText: 'Would Question',
                          labelStyle: TextStyle(
                              color: Colors.blue
                          ),
                          enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.blue),
                          ),
                          focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.blue),
                          ),
                        ),
                        onSubmitted: (_) => _submitData(),
                      ),
                      TextField(
                        maxLength: 56,
                        style: TextStyle(
                          color: Colors.white,
                        ),
                        textAlign: TextAlign.center,
                        decoration: InputDecoration(
                          counterText: '',
                          labelText: 'Rather Question',
                          labelStyle: TextStyle(
                              color: Colors.red
                          ),
                          enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.red),
                          ),
                          focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.red),
                          ),
                        ),
                        keyboardType: TextInputType.number,
                        onSubmitted: (_) => _submitData(),
                      ),

                      RaisedButton(onPressed: () {
                        _submitData();

                      }, child: Text('Add Question', style: TextStyle(
                          color: Colors.white
                      ),),color: Theme.of(context).primaryColor,
                      ),

                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );

Upvotes: 1

AskNilesh
AskNilesh

Reputation: 69671

Use this

crossAxisAlignment: CrossAxisAlignment.center,

instead of this

crossAxisAlignment: CrossAxisAlignment.end,

SAMPLE CODE

return Container(
      height: stackHeight * 0.4,
      decoration: BoxDecoration(
          color: Color(0xff404040),
          borderRadius: BorderRadius.only(topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0))
      ),
      child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(

            padding: EdgeInsets.only(top: 10, left: 10, right:10,
              bottom: MediaQuery.of(context).viewInsets.bottom + 10 ,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                TextField(
                  maxLength: 56,
                  style: TextStyle(
                    color: Colors.white,
                  ),
                 textAlign: TextAlign.center,
                  decoration: InputDecoration(
                    counterText: '',
                      labelText: 'Would Question',
                      labelStyle: TextStyle(
                          color: Colors.blue
                      ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.blue),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.blue),
                    ),
                  ),
                  onSubmitted: (_) => _submitData(),
                ),
                TextField(
                  maxLength: 56,
                  style: TextStyle(
                    color: Colors.white,
                  ),
                  textAlign: TextAlign.center,
                  decoration: InputDecoration(
                    counterText: '',
                      labelText: 'Rather Question',
                      labelStyle: TextStyle(
                          color: Colors.red
                      ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.red),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.red),
                    ),
                  ),
                  keyboardType: TextInputType.number,
                  onSubmitted: (_) => _submitData(),
                ),

                RaisedButton(onPressed: () {
                  _submitData();

                }, child: Text('Add Question', style: TextStyle(
                    color: Colors.white
                ),),color: Theme.of(context).primaryColor,
                ),

              ],
            ),
          ),
          ],
        ),
      ),
    );

Upvotes: 1

Related Questions