fix smooth scrolling issue on android

[srkrishnan1989]

scrolling issue on android

while scrolling from bottom to top/up, its jump to previous ListTile,

the code to reproduce the problem,

create fresh app using "flutter create -t skeleton my_app"

just replace code using styled_text on "sample_item_list_view.dart" file

replace this code

return ListTile(
            title: Text('SampleItem ${item.id}'),
            leading: const CircleAvatar(
              // Display the Flutter Logo image asset.
              foregroundImage: AssetImage('assets/images/flutter_logo.png'),
            ),
            onTap: () {
              // Navigate to the details page. If the user leaves and returns to
              // the app after it has been killed while running in the
              // background, the navigation stack is restored.
              Navigator.restorablePushNamed(
                context,
                SampleItemDetailsView.routeName,
              );
            }
          );

with

return Column(
            children: [
              ListTile(
                  title: StyledText(
                    text: '''<b>SampleItem ${item.id}</b>
                    styled_text
                    styled_text_tag
                    styled_text_tag_action
                    styled_text_tag_base
                    styled_text_tag_custom
                    styled_text_tag_icon
                    styled_text_tag_widget
                    styled_text_tag_widget''',
                    newLineAsBreaks: true,
                    tags: {
                      'b': StyledTextTag(
                          style: TextStyle(fontWeight: FontWeight.bold)),
                    },
                  ),
                  //  Text('SampleItem ${item.id}'),
                  leading: const CircleAvatar(

                    foregroundImage:
                        AssetImage('assets/images/flutter_logo.png'),
                  ),
                  onTap: () {

                    Navigator.restorablePushNamed(
                      context,
                      SampleItemDetailsView.routeName,
                    );
                  }),
              const Divider(
                color: Colors.grey,
              ),
            ],
          );

change items list length to 30 count,

now build the app and run on android devices,

while scrolling to bottom, it scrolls fine,

but slowly scroll up/top , 'ListTile' get jump/skip to previous.

same code made with normal Text widget (except style), it scrolls fine.

return Column(
            children: [
              ListTile(
                  title: Text(
                    '''SampleItem ${item.id}
                  styled_text
                    styled_text_tag
                    styled_text_tag_action
                    styled_text_tag_base
                    styled_text_tag_custom
                    styled_text_tag_icon
                    styled_text_tag_widget
                    styled_text_tag_widget''',
                  ),

                  leading: const CircleAvatar(
                    foregroundImage:
                        AssetImage('assets/images/flutter_logo.png'),
                  ),
                  onTap: () {
                    Navigator.restorablePushNamed(
                      context,
                      SampleItemDetailsView.routeName,
                    );
                  }),
              const Divider(
                color: Colors.grey,
              ),
            ],
          );

[andyduke]

@srkrishnan1989 StyledText parses xml tags asynchronously, so at first the widget is empty, and when the xml tags are parsed, it is rebuilt with text content, this causes the widget to resize. Therefore, when scrolling the list up (and down too), when the previous widgets are rebuilt, the row height jumps.

You can make the list item's height fixed, for example by wrapping a StyledText in a SizedBox widget with a given height, this will prevent height jumps on scroll.

[srkrishnan1989]

in my app I can't make fixed height SizedBox.