CODEWITHSUNDEEP
flutter
Ramses Kouam
Ramses Kouam

Reputation: 371

how to reduce the space between icon and a text in a raisedbutton.icon widget?

i would like to reduce the space which exists between an icon and a text inside a raisedbutton

enter image description here

here is what i have tried to do: 

            RaisedButton.icon(onPressed: (){
                    (product.hasAbonnement=false) ?
                    Navigator.push(context,
              MaterialPageRoute(builder: (context) => ProductDetailPage(
              product: product,
              viewModel: widget.viewModel,),
      ))
        :
          Navigator.push(context,
              MaterialPageRoute(builder: (context) => SubcriptionDetailPage(
              product: product,
              viewModel: widget.viewModel,),
      ));

      }, icon: Icon(Icons.add,color: Colors.white), label:Text('S\'abonner',
      style:TextStyle(color:Colors.white,
      )
     ,),
     clipBehavior: Clip.antiAlias,
     shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(18.0),
    ),
    color:mmpataColorBlue,
      ),

Upvotes: 1

Views: 4852

Answers (2)

Alok
Alok

Reputation: 9008

Here is the solution, as Hiwa Jalal has given the right answer, just a bit of manipulation required. Here you go:

Center(
   child: RaisedButton(
     color: Colors.blue,
     shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(18.0),
     ),
     child: Row(
       mainAxisSize: MainAxisSize.min,
       children: <Widget>[
         Icon(Icons.add, color: Colors.white), 
         Text('S\'abonner', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold))
       ]
     ),
     onPressed: () {}
   )
)

Output:

Screenshot of the Result

Upvotes: 2

hewa jalal
hewa jalal

Reputation: 963

you can use the default RaisedButton constructor and make it's child a Row then you can provide the space you want between the children widget using a SizedBox, for example:

RaisedButton(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Icon(Icons.add),
            SizedBox(width: 20), // give the width that you desire 
            Text('S\'abonner')
          ],
        ),
        onPressed: () {},
      )

Upvotes: 0

Related Questions