I want to create a Text widget that has on top left an icon that will allow the Text to be edited by the user, but I can't manage to put the icon on the top left of the Text, like in the photo attached below for the text "Home". I've searched similar questions, but I've did not encountered anything similar.

Desired state

Do you have any idea how can I achieve what I desire?


Solution 1: Dhruv Sakariya

Row(
children: [
Icon(Icons.download_rounded),
Text(" Download")
],
)


Solution 2: Siddharth Mehra

You can achieve this using Stack:

Stack(
  clipBehavior: Clip.none,
  children: [
    const Text("1. Home", style: TextStyle(color: Colors.black, 
       fontSize: 16, fontWeight: FontWeight.bold),),
     Positioned(
       top: -2.5, right: -10,
       child: GestureDetector(
          onTap: (){
            print("edit pressed");
          },

          child: const Icon(Icons.edit, size: 12,),
         )
        )
       ],
      )

Output: enter image description here


Solution 3: Nibha Jain

Stack widget is a built-in widget in flutter SDK which allows us to make a layer of widgets by putting them on top of each other. We can overlap multiple widgets by using Stack.

Here is a sample code :

  Stack(
      children: <Widget>[
        TextField(
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            hintText: 'hint',
          ),
        ),

        Align(
            alignment: AlignmentDirectional.topEnd, // <-- SEE HERE
            child:
            Container(
              transform: Matrix4.translationValues(0.0, -10.0, 0.0),
              width: 30,
              height: 30,
              child: IconButton(
                onPressed: () {
                  print('your code');
                },
                icon: Icon(Icons.search), //your icon
              ),
            )),

      ],
    ),

Reference : Stack Tutorial

Stack