CODEWITHSUNDEEP
flutterdart
Rishail Siddiqui
Rishail Siddiqui

Reputation: 231

How do I correct the alignment and remove unwanted space

Hi I cant seem to figure out how do I correct the alignment of the icon button that I have placed and remove the unnecessary space

what I want to achieve:

enter image description here

What I am getting:

enter image description here

Here is my code:

 crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        RichText(
           text: TextSpan(
               style: TextStyle(
                 color: AppColor.primarypurple,
                 fontSize: 14,
                 fontWeight: FontWeight.w500,
               ),
               children: [
                 TextSpan(text: widget.heading
                 ),
                 WidgetSpan(child:IconButton(icon:Icon(Icons.info),color:AppColor.darkBlue , onPressed: ()=>showDialog(context: context, builder: (context)=> alert),) )
               ]
           ),
         ),

Upvotes: 0

Views: 139

Answers (1)

Benedict
Benedict

Reputation: 458

Instead, you should display just the Icon widget wrapped with Inkwell like so:

InkWell(
   child: Icon(Icons.info, color:AppColor.darkBlue),
   onTap: ()=>showDialog(context: context, builder: (context)=> alert),) )
)

Or Wrap the IconButton inside a Container which has a width.

For example:

Container(
  padding: const EdgeInsets.all(0.0),
  width: 30.0, // you can adjust the width as you need
  child: IconButton(
  ),
),

Display with a Text Widget before the icon like so

Row(
   children: [
      Text('Your text'),
      Spacer(),
      InkWell(
         child: Icon(Icons.info, color:AppColor.darkBlue),
         onTap: ()=>showDialog(
            context: context, 
            builder: (context)=> alert),
         ),
      ),
   ],
)

Upvotes: 2

Related Questions