Carter
Carter

Reputation: 179

Widget adds extra padding to icon when it runs for second time?

I have a widget for a Date Selector that shows a datepicker, an icon, and some text. Some optional text is passed into the text part, so depending on where it's called, that is the only difference in it. Now on a certain page this Widget is called twice, but on the second time, the icon has more padding on it's left than the first time. This padding shouldn't be there. The only difference between the two is the optional text given to each one, which seems to have enough room. I've attached the code and an image of it. Thanks to anyone who can offer some advice on how to get rid of that extra spacing!

As you can see in the image the 2nd icon below the first has extra padding

This is the widget that renders the datepicker, icon, and text.

class DatePicker extends StatefulWidget {
   final String optionalText;

  DatePicker({Key key, @required this.optionalText}) : super(key: key);

  @override
   _DatePickerState createState() => _DatePickerState();
 }

 class _DatePickerState extends State<DatePicker> {
  DateTime selectedDate = DateTime.now();


   @override
   Widget build(BuildContext context) {
     return Container(
      child: Row(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
       children: <Widget>[
        Container(
         width: MediaQuery.of(context).size.width * .50,
         height: MediaQuery.of(context).size.height * .07,
         child: Padding(
          padding: EdgeInsets.fromLTRB(33, 0, 5, 0),
          child: RaisedButton(
           color: Colors.white,
           shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(10)),
           child: dateHyphenReplacer(selectedDate),
           onPressed: () => _selectDate(context),
          ),
         ),
        ),
        Padding(
         padding: EdgeInsets.fromLTRB(5, 10, 0, 10),
         child: Icon(
          Icons.calendar_today,
          color: Colors.white,
          size: 30,
         ),
        ),
        Container(
         child: Padding(
          padding: EdgeInsets.all(8.0),
          child: Text(
           'Choose ${widget.optionalText} Date',
           style: TextStyle(
               color: Colors.white,
               fontStyle: FontStyle.italic,
               fontFamily: 'Montserrat',
               fontSize: 16),
          ),
         ),
        ),
       ],
      ),
     );
   }

   Future<void> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
        context: context,
        initialDate: selectedDate,
        firstDate: DateTime(2015, 8),
        lastDate: DateTime(2101));
    if (picked != null && picked != selectedDate)
     setState(() {
      selectedDate = picked;
     });
   }

  dateHyphenReplacer(date){
     date = formatDate(date, [mm, '/',dd,'/',yy]);
     return Text('$date', style: TextStyle(color: Colors.blue, fontSize: 20));
  }

  }



This is where they are called

              Container(
                  child: DatePicker(optionalText: "Start")
              ),
              SizedBox(height: 10),
              Container(
                child: DatePicker(optionalText: "End"),
              ),

Upvotes: 0

Views: 131

Answers (1)

bluenile
bluenile

Reputation: 6029

It is because of MainAxisAlignment.spaceBetween and the length of the two texts is different, therefore it seems to have different padding. Use MainAxisAlignment.start and you'll understand.

edit : typo

Upvotes: 2

Related Questions