CODEWITHSUNDEEP
flutterwidgeticons
Ciprian Teletin
Ciprian Teletin

Reputation: 33

Add Icon in the top left of the text Flutter

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?

Upvotes: 0

Views: 1067

Answers (3)

Nibha Jain
Nibha Jain

Reputation: 8161

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

Upvotes: 1

Siddharth Mehra
Siddharth Mehra

Reputation: 1899

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

Upvotes: 1

Dhruv Sakariya
Dhruv Sakariya

Reputation: 590

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

Upvotes: 1

Related Questions