Width issues between android and ios

[peazz]

I have the calendar selector in a simple Container, on iOS is fits perfect, on Android Pixel 3 Simulator, the width is too small

@override
  Widget build(BuildContext context) {

    return Container(
      height:90,
      decoration: BoxDecoration(
        color: Colors.white,
      ),
      padding: const EdgeInsets.only(top: 4, bottom:5, left: 10, right: 10),

      child: DatePickerTimeline(
        _currentSelection,
        dateSize: 20,
        daySize: 10,
        monthSize: 10,
        selectionColor: Colors.grey[200],
        monthColor: Colors.grey[500],
        onDateChange: (date) {
          _selectDate(date);
        },
      )
    );
  }

Expected behavior

Between both devices I expected the same edge to edge layout,. It doesnt seem to be inheriting font styles on Android either (right screen)

Screenshots

https://pasteboard.co/IxHH3qh.jpg

[peazz]

Edit: Font problem is located in this file: DatePickerTimelineFlutter-master/lib/date_widget.dart: at lines 50, 57 and 64.

If you can remove hard coded fonts or add in parameters for us to control the font and font weight that would be great

[iamvivekkaushik]

Hi @peazz, thanks for pointing this out. I will add the option to manage the font and create the release.

[peazz]

Thanks, could this be moved up the priority list please? your hard coded fonts are not obeying theme defaults on android and its causing my layouts to break.

Thanks for your work

[iamvivekkaushik]

Hi @peazz, I am traveling for the past two days didn't get much time to work on this. I will try to update this library today.

Thanks for you patience

[iamvivekkaushik]

Hi @peazz, please check if this fixes your issue.

[peazz]

Let me check it out and let you know.

[peazz]

Ok, great work on the TextStyle options, might want to add some graceful deprecation on the old fields for users that need to upgrade.

So although fonts are working on both android and ios now, its not solved the width issues, any ideas what it could be?

[iamvivekkaushik]

It is most likely the device resolution issue. The only way I can think of fixing this is by providing font size based on the device resolution.

[peazz]

What about a different approach, how about determining the width of the screen and the orientation;

if orientation.is landscape -> selector == screen width * 0.1 ( 10 items )
if orientation.is vertical -> selector == screen width * 0.2 (5 items)

With fixed width on the selectors, it would technically make them fit on any device, regardless of resolution :)

[peazz]

Thanks for all your help, I am going to mess around with coding my own solution, heres some code I come up with already that will handle dynamic item sizing

SliverToBoxAdapter(
    child: Container(
    height: 90,
    padding: EdgeInsets.symmetric( vertical: 5, horizontal: 30 ),
    //color: Colors.black,
    child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {

        DateTime _date = DateTime.now().add(Duration( days: index ));

        return Container(
            // remember horizontal padding will produce double space, if horizontal padding is 2.5 then, block padding is 2.5 * 5
            // (( screenWidth - (horizontalPadding * 2) ) - numberOfItemsInView * ItemMargin) * selectorSizePercentageAsDecimal
            width: (((MediaQuery.of(context).size.width - ( 30 * 2 )) - 5 * 5) * 0.2), 
            margin: EdgeInsets.symmetric(horizontal: 2.5),
            decoration: BoxDecoration(
            color: Colors.grey[100],
            borderRadius: BorderRadius.circular(5)
            ),
            child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
                Text(
                '${ DateFormat('MMM').format( _date ) }', 
                textAlign: TextAlign.center,
                style: TextStyle(
                    color: Colors.black
                )),

                Text(
                '${ DateFormat('dd').format( _date ) }', 
                textAlign: TextAlign.center,
                style: TextStyle(
                    color: Colors.black
                ))
            ],
            ),
        );
        },
    ),
    ),
),

The thing to remember is that any padding or spacing you give the items, you need to remove it from the screen width before generating a block width :)

hopefully this will give you an idea of how to tackle this regardless of screen resolution

[peazz]

I can confirm, with a bit more fleshing out the above code works perfectly to retain selector sizes, have a play - i hope it helps.

[iamvivekkaushik]

thanks for the input, I will try to fix this width issue as soon as I get some time on my hands. If you want you can contribute to this library.

[peazz]

How am I able to contribute and submit merge requests?

[iamvivekkaushik]

Easy, fork this repo, make changes to it and create a pull request.

[iamvivekkaushik]

Hi, you can now specify the width of each Date item and fit as many items as your screen will allow.