Add Icon in the top left of the text Flutter-CodePudding

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.

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

CodePudding user response：

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

CodePudding user response：

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:

CodePudding user response：

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