CODEWITHSUNDEEP
flutterflutter-layout
Habib ur Rehman
Habib ur Rehman

Reputation: 448

Flutter widget Alignment

I want to align the (+,-) icons and TextField on same Vertical Position. But i'm not getting this. Here is My Code.

Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
             InkWell(
                  child: Icon(Icons.remove ,color: Colors.white),
                  onTap: (){},
                     ),
                     Container(
                               width: 35,
                               height: 40,
                               child: TextField(
                                      inputFormatters:[WhitelistingTextInputFormatter(RegExp(digit_Reg_Expression))],
                                      keyboardType: TextInputType.number,
                                      textAlign: TextAlign.center,
                                      cursorColor: Colors.green,
                                      controller: Controler_size[index],
                                               ),
                              ),
                                      InkWell(
                                              child: Icon(Icons.add,color: Colors.white),
                                              onTap: (){},
                                             )
                      ],
)

Please Help me to position these Widgets Vertically so that they align in the same vertical position.enter image description here

Upvotes: 0

Views: 61

Answers (3)

Mohammad_Asef
Mohammad_Asef

Reputation: 336

set mainAxisAlignment to MainAxisAlignment.center

Upvotes: 0

Kyle Houston - Phi Anh
Kyle Houston - Phi Anh

Reputation: 76

I followed the link you attach in the question, I think the problem is at your Container which wraps the TextField: 

Container(...
   width: 35,
  ---> remove this: (height: 40) ...
)

Upvotes: 0

timilehinjegede
timilehinjegede

Reputation: 14053

If you want to place elements vertically, use the Column widget. If you want to place elements horizontally use the Row widget.

Check the code below: It works perfectly:

Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
             InkWell(
                  child: Icon(Icons.remove ,color: Colors.white),
                  onTap: (){},
                     ),
                     Container(
                               width: 35,
                               height: 40,
                               child: TextField(
                                      inputFormatters:[WhitelistingTextInputFormatter(RegExp(digit_Reg_Expression))],
                                      keyboardType: TextInputType.number,
                                      textAlign: TextAlign.center,
                                      cursorColor: Colors.green,
                                      controller: Controler_size[index],
                                               ),
                              ),
                                      InkWell(
                                              child: Icon(Icons.add,color: Colors.white),
                                              onTap: (){},
                                             )
                      ],
)

I hope this helps.

Upvotes: 1

Related Questions