flutter center text with suffix icon

March 25, 2022

SizedBox(
                  width: 150,
                  child: TextField(
                    textAlign: TextAlign.center,
                    decoration: InputDecoration(
                        suffixIcon: Icon(
                          Icons.keyboard_arrow_down_outlined,
                          color: kGreyColor,
                        ),
                        hintStyle: TextStyle(fontSize: 20),
                        hintText: "Bugün"),
                  ),
                ),

how can i make this design I did something but it didn’t turn out well
eddit:Content padding coming theme but not looking exactly center

>Solution :

You can achieve this by using a Container and a Stack.

Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(5),
                  border: Border.all(color: Colors.grey)),
              child: Stack(
                children: const [
                  Padding(
                    padding: EdgeInsets.symmetric(horizontal: 40, vertical: 5),
                    child: Text("Bugün"),
                  ),
                  Positioned.fill(
                    child: Align(
                      alignment: Alignment.centerRight,
                      child: Icon(
                        Icons.keyboard_arrow_down_outlined,
                      ),
                    ),
                  )
                ],
              ),
            )

You can check the code on this DartPad