I have made a list of images and using ListView.builder to display the images and its working perfectly fine while debugging and even in debug apk of the app but when i use release apk its not showing the images.
List<Activity> act = [
Activity('assets/sports.png', 'Sports', false),
Activity('assets/sleeping.png', 'Sleep', false),
Activity('assets/shop.png', 'Shop', false),
Activity('assets/relax.png', 'Relax', false),]
I am using ListView.builder to show images like this:
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: act.length,
itemBuilder: (context, index) {
return Row(children: <Widget>[
SizedBox(
width: 15,
),
GestureDetector(
child: ActivityIcon(act[index].image)));
Make sure that you've "use-material-design: true" line above assets
There doesn't seem to be an issue from the code you've provided. It'll greatly help if you're able to provide any errors received from the app when the issue occurred. Another way that you can try is by switching to different Flutter channels and see if the app performs better.
Related
Woah! I've spent several hours refactoring nested ListViews to a parent CustomScrollView & child Slivers. The errors Slivers produced were opaque and frightening, with nothing illuminating in Logcat; sleuthing devoured much of the time.
Anyway, that's solved. I find I still have jank scrolling a 15-item list. OK, each item can involve further numerous widgets {Padding, Alignment, Elevated button, Row, Text, SizedBox, Icon}. So my 15-item list ends up being multiple more Widgets.
I've now swapped out my SliverChildListDelegate for SliverChildBuilderDelegates, so a Builder builds the Widget List lazily. Having done this, it seems quite inefficient because it's increased the Widgets in the Widget tree. Each of the builders' buildItem() calls needs an extra Column Widget to wrap that sub-chunk of the total list.
It may be a lot of Widgets scrolling but it's only a 15 item list. I wish I knew what to optimise. Any thoughts on how to best reduce jank on Lists for mobile web?
The Flutter team says Flutter works best for computational-centred apps rather than text heavy informational apps. In future would it be better just to use webView Widgets? I always thought embedding Webviews would be clunky and slow but Lists of native Flutter Widgets, even as SliverLists, give jank.
Here is the janky list complete with builder:
Widget buildLocationDescriptionWidgets(LocationDetails presentLocation) {
print(LOG + "buildLocationDescriptionWidgets");
if (presentLocation.descriptionLinkUrls.isEmpty)
return SliverToBoxAdapter(child:
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
child: Text(presentLocation.description[0])));
int numDescriptionBlocks = presentLocation.description.length;
double paddingBottom = 16;
if (presentLocation.descriptionLinkUrls.length >= numDescriptionBlocks) {
paddingBottom = 0;
}
return SliverPadding(
padding: EdgeInsets.fromLTRB(16, 16, 16, paddingBottom), sliver:
SliverList(
key: Key("descriptionSliverList"),
delegate: SliverChildBuilderDelegate((context, index) =>
buildDescriptionBlock(context, index),
childCount: presentLocation.description.length
),
));
}
Column buildDescriptionBlock(BuildContext context, int index) {
List<Widget> colChildWidget = [];
colChildWidget.add(Text(
widget.presentLocation.description[index],
textAlign: TextAlign.left,
));
if (index < widget.presentLocation.descriptionLinkUrls.length) {
colChildWidget.add(Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Align(
alignment: Alignment.center,
child: index >=
widget.presentLocation.descriptionButtonIcons.length
? ElevatedButton(
child: Text(
widget.presentLocation.descriptionButtonText[index]),
onPressed: () {
_launchURL(
widget.presentLocation.descriptionLinkUrls[index]);
})
: ElevatedButton(
child:
Row(mainAxisSize: MainAxisSize.min, children: [
Text(
widget.presentLocation.descriptionButtonText[index]),
SizedBox(width: 8),
FaIcon(
buttonIconMap[widget.presentLocation
.descriptionButtonIcons[index]],
size: 16)
]),
onPressed: () {
_launchURL(
widget.presentLocation.descriptionLinkUrls[index]);
}))));
}
return Column(crossAxisAlignment: CrossAxisAlignment.start, children: colChildWidget);
}
Should I regress from a builder to a conventional SliverList?
Other things I've tried: I eliminated jank in my app Drawer list by putting const everywhere possible, lots of Dividers were made Const. But when you style text using Theme.of(context).textTheme.bodyText2 etc. it doesn't allow you to set textboxes to const. If you want to use const you can't style the app globally, you'd have to hard code. Is it worth forsaking abstraction for hard coding Text widget styles?
Here is the web app: Love Edinburgh
For the clearest example of jank
Open the App Drawer
Scroll to WONDER
Tap Arthur's Seat
Open the panel to full screen - slide it up
Scroll down the panel.
It doesn't show on a desktop browser which is compiled using Skia / Webkit. It's a bit fiddly to get scroll working on a desktop browser, you need to click amongst the text, then attempt to scroll. It's meant for mobile use so I'm resigned to that.
Not sure how to help you out. Would rather put this on a comment rather than answer but I don't have the points to do a comment.
Anyway, I wish I could replicate your problem. On my personal experience, for a 15 item list with numerous child widgets, it shouldn't be janky unless it has probably big sized images or really too much extra widgets.
On my case, I made sure to "isolate" / "compute" my heavy computations and showed a loading screen while preparing the list.
You may read on:
Isolates : https://dart.dev/guides/language/concurrency
Compute:
https://api.flutter.dev/flutter/foundation/compute-constant.html
Hope that helped!
I try to make an apps using long GridView with complexe item. I use GridView.builder which is optimize and it creates visible items (and it do the job !).
But in my case, I need some widget before and I must add Column() and SingleChildScrollView.
When I do that I need to change GridView.builder with primary=false and shrinkWrap: true.
But now, all GridView items are generated.
EDIT: New demo
My wanted behavior is the mode "ColumnWithGrid".
Check this demo to understand issue.
Press top buttons to switch modes: open Console and check log
https://dartpad.dev/?id=4f60ffbf656767a6e5c5bccc280acd3a
I think "shrinkWrap" property must stay to false but I never success to keep it in this case.
My question:
How to use GridView.builder properly when I need to include it inside Column() or whatever ?
How to make the mode "ColumnWithGrid" without generate full list (using dev.pub, ...) ?
Thanks
After some search and experiment, I found some posts about this topic (which is true for GridView or ListView widget) and my conclusion is :
GridView doesn't work like I expect !
When I create just a single GridView, it's like I create a container of my full device area and I put GridView inside.
This "hidden container" just keep info visible inside this container area.
So if I include my GridView inside Column without any container, it doesn't create it for me and unroll all my data to compute properly size.
The feature that expected is : GridView computes only items at screen and unroll virtually data (so manage local/global slider position to create only item inside visible area).
I update my demo to show the effect about all cases.
Sources:
https://docs.flutter.dev/cookbook/lists/long-lists
https://medium.com/saugo360/flutter-creating-a-listview-that-loads-one-page-at-a-time-c5c91b6fabd3
A CustomScrollView in combination with SliverList and SliverGrid can be used to achieve lazy loading.
CustomScrollView(slivers: [
SliverList(
delegate: SliverChildListDelegate([
const Center(
child: Text(
"Header",
style: TextStyle(fontSize: 40),
),
),
]),
),
SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
delegate: SliverChildBuilderDelegate(
(context, index) {
print("generate the item $index");
return Container(color: Colors.blue);
},
childCount: 100,
),
),
]),
https://dartpad.dev/?id=9633305d9a2daa0905de852fa003aba1
I want to use part of my code that start when user click button on screen ,when he swipes screen to the left. It should work like when user swipe screen to flip the page in books app.
I tried GestureDetector but didn't found anything looks like what i want
I have a few widgets in column, code of widget that i show takes up most of screen
Expanded(
flex: 7,
child: GestureDetector(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Html(
data:
"<p>${CheckList
.checkLists[widget.index]
.checkListPoints[
CheckList.checkLists[widget.index].position]
.requirement}</p>")),
)),
Use page_turn
or better_page_turn
better_page_turn is null safe and page_turn is from flutter community but not null safe
I am new to flutter and using it for web. I see that there is no built in scrollbar when the page overflows the viewport
Would it be possible to somehow have a javascript script in the html that would check the height of the content periodically and add/remove scroll bar as necessary?
Does this make any sense?
Thank you
I'm not sure if its what you want but if you wrap your Listview with Scrollbar then you get the result you want:
Scrollbar(
child: ListView.builder(
itemCount: 20,
itemBuilder: (context, index) => ListTile(title: Text("Item= ${index + 1}"),),),
)
You can find more here
I'm trying to build a Flutter Application. The application mostly consists of ListViews which are filled with data fetched from an API. Randomly the application freezes, not responsive at all, even tapping on buttons which are not part of the current interface (i.e menu). No error messages are shown in the debugger and even hot restart does not work in this case, the application must be stopped and run from start. Does anyone have any idea what may cause this issue? Thanks
Widget _buildMessageDisplay() {
return Consumer<ChatScreenProvider>(
builder: (context, chatState, child) {
return FutureBuilder(
builder: (context, projectSnap) {
if (projectSnap.connectionState == ConnectionState.done) {
return Padding(
padding: EdgeInsets.symmetric(
horizontal: 4.0,
),
child: ListView.builder(
physics: ClampingScrollPhysics(),
controller: _scrollController,
itemCount: chatState.messages.length,
reverse: true,
itemBuilder: (context, index) {
final ct = _buildChatThread(chatState.messages[index]);
return ct;
},
),
);
}
return Text('');
},
future: _getMessages,
);
},
);
}
I have also encountered the same problem, though restarting and rebuilding usually fixes this for me... Make sure that you have the latest version of flutter, by running flutter upgrade in the terminal or command prompt. Additionally, you could also restart your computer, reinstall the emulators, or even reinstall flutter and perform its setup from scratch. May I know if you are using a simulator or a physical device so that I could try to pinpoint the error? Thanks, and I hope this helps.
Since this error is project specific, I would suggest running flutter clean, which removes unwanted and unused files which could be causing your error
Also, how often does this error occur for you? Is it specific to this project or it is stuck on all projects?