Menu
I have build a flutter app that is complex enough, Every thing was working fine until I started getting images from an api that are located on AWS. But after populating the image.network widget and cached_network_image with actual data I started getting a lot of crashes randomly and more when navigating to other pages with images in them.
Flutter doesn't show me any errors only "lost connection to device".
I am testing this app on both android an iOS device , It's the same : a lot of crashes.
the images are of size of about 200-400 KB each, but the crashes happen even when I display 6 of them on the screen.
At first I wasn't didn't know that the crashes where caused by images so I tried a lot of methods and changed the code a lot. like making most of my widgets stateless, tried changing the Cached_Network_Image to Image.Network widgets, made widgets smaller so that the rebuild doesn't take a lot of memory when In set state. I also tried using devTools to diagnose the problem to know veil.
devTools only shows memory surge before the app crashes.
I am now certain the the images are the cause for these crashes.
here is the code in main.js not including imports , though I can gladly provide if needed.
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await allTranslations.init();
User user = await getLocalUserObject();
runApp(Bestiee(user));
}
class Bestiee extends StatefulWidget {
User user;
Bestiee(this.user);
@override
_BestieeState createState() => _BestieeState();
}
class _BestieeState extends State<Bestiee> {
SpecificLocalizationDelegate _localeOverrideDelegate;
String currentLocal = "en";
Widget startScreen;
GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
@override
void initState() {
bypassLogin();
_localeOverrideDelegate = new SpecificLocalizationDelegate(null);
applic.onLocaleChanged = onLocaleChange;
NotificationHandler.scaffoldKey = scaffoldKey;
new NotificationHandler().initializeFcmNotification();
super.initState();
// allTranslations.onLocaleChangedCallback = _onLocaleChanged;
}
@override
Widget build(BuildContext context) {
print('-------------------------------------------');
print('main is called');
return MaterialApp(
localizationsDelegates: [
_localeOverrideDelegate,
const TranslationsDelegate(),
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
// GlobalCupertinoLocalizations.delegate,
],
supportedLocales: applic.supportedLocales(),
// locale: Locale("en", "UK"),
// locale: Locale("fa", "IR"),
// locale : Locale(allTranslations.currentLanguage),
locale: Locale(currentLocal),
// home: WelcomScreen(changeLanguageCallBack: changeLanguageCallBack,),
home: Scaffold(
key: scaffoldKey,
body: QuickActionsManager(
child: startScreen,
),
),
routes: {
ItemSearchResultScreen.id: (context) =>
ItemSearchResultScreen(screenName: 'Items'),
ItemSearchResultScreen.usedItemsId: (context) =>
ItemSearchResultScreen(screenName: 'Used Items'),
PlacesSearchResultScreen.id: (context) =>
}
... 20 More other routes
HotScreen.dart in which most of the crashes happen when navigating from and to other routes :
class HotScreen extends StatefulWidget {
static List<Category> categories = [];
static List<Subcategory> subcategories = [];
static User user = User();
static Location userLocation = Location();
static List<Item> items ;
static List<Item> usedItems;
static List<Place> places;
static List<Person> people ;
@override
_HotScreenState createState() => _HotScreenState();
}
class _HotScreenState extends State<HotScreen> {
@override
void initState() {
HotScreen.items = [];
HotScreen.usedItems = [];
HotScreen.places = [];
HotScreen.people = [];
getItemPlacesPeople();
getAllCategories();
getAllSubcategories();
super.initState();
}
@override
Widget build(BuildContext context) {
print('hot screen called');
SingleItemScreen.isScreenCalledFromAddUsedItemScreen = false;
return Scaffold(
body: ModalProgressHUD(
inAsyncCall: false,
child: Container(
decoration: kPageMainBackgroundColorBoxDecoration,
child: SafeArea(
child: Padding(
padding: const EdgeInsets.all(8.0),
//main screen scrollable widgets
child: ListView(
shrinkWrap: true,
children: <Widget>[
Text(
getTranslation('Bazzar24', context),
style: kBazarGalleryTitleStyle,
),
FeaturedItems(isScreenCalledFromMyPropertiesScreen: false),
FeaturedUsedItems(),
FeaturedIPlaces(isCalledFromMyPropertiesScreen: false),
FeaturedPeople(isCalledFromMyPropertiesScreen: false),
// NewPlaces(
// places: places,
// ),
],
),
),
),
),
),
);
}
getAllCategories() async {
List<Category> _categories = [];
http.Response response = await getRequest(baseURL + plainCategoryAPI);
var allCategoriesMap = jsonDecode(response.body);
for (int i = 0; i < allCategoriesMap.length; i++) {
var json = allCategoriesMap[i];
Category category = Category.fromJson(json);
category.id = allCategoriesMap[i]['_id'];
//NOTE here I have used SueperCategory instead of camelCase superCategory because the data is already saved in this way
category.superCategory = allCategoriesMap[i]['SuperCategory'];
_categories.add(category);
}
HotScreen.categories.clear();
HotScreen.categories.addAll(_categories);
allCategoriesMap.clear();
}
getAllSubcategories() async {
List<Subcategory> _subcategories = [];
http.Response response = await getRequest(baseURL + plainSubcategoryAPI);
var allSubcategoriesMap = jsonDecode(response.body);
for (int i = 0; i < allSubcategoriesMap.length; i++) {
var json = allSubcategoriesMap[i];
Subcategory subcategory = Subcategory.fromJson(json);
subcategory.id = allSubcategoriesMap[i]['_id'];
_subcategories.add(subcategory);
}
HotScreen.subcategories.clear();
HotScreen.subcategories.addAll(_subcategories);
allSubcategoriesMap.clear();
}
getItemPlacesPeople() async {
await getAllItems(setItemsAndUsedItemsStateCallback);
await getAllPlaces(setPlaceStateCallback);
await getAllPeople(setPeopleStateCallback);
}
setItemsAndUsedItemsStateCallback(List<List<Item>> items){
if(this.mounted){
setState(() {
HotScreen.items.clear();
HotScreen.usedItems.clear();
HotScreen.items.addAll(items[0]);
HotScreen.usedItems.addAll(items[1]);
});
}
}
setPlaceStateCallback(List<Place> places){
if(this.mounted){
setState(() {
HotScreen.places.clear();
HotScreen.places.addAll(places);
});
}
}
setPeopleStateCallback(List<Person> people){
if(this.mounted){
setState(() {
HotScreen.people.clear();
HotScreen.people.addAll(people);
});
}
}
}
sample widgets inside HotScreen:
FeaturedItems.dart :
class FeaturedItems extends StatelessWidget {
FeaturedItems({this.isScreenCalledFromMyPropertiesScreen});
final bool isScreenCalledFromMyPropertiesScreen;
final List<Item> items = HotScreen.items;
final myUsedItems = MyPlacesJobsItems.items;
@override
Widget build(BuildContext context) {
print('featured items widget called');
List<Item> _items;
if (isScreenCalledFromMyPropertiesScreen == true) {
_items = items;
} else {
_items = myUsedItems;
}
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 20,
),
Align(
alignment: Alignment.topLeft,
child: Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Text(
isScreenCalledFromMyPropertiesScreen
? 'My Items'
: 'Featured Items',
style: kFeatureTitleTextStyle),
),
),
Container(
height: 700 / 3.5,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: items.length < 10 ? HotScreen.items.length : 10,
itemBuilder: (contet, int index) {
return SingleItemCard(
item: _items.length > 10
? HotScreen.items[_items.length - 10 + index]
: HotScreen.items[index],
isPersonItem: false,
moduleName: _items.length > 10
? HotScreen.items[_items.length - 10 + index].moduleName
: HotScreen.items[index].moduleName,
isScreenCalledFromMyPropertiesScreen:
isScreenCalledFromMyPropertiesScreen,
);
},
),
),
SizedBox(
height: 10,
),
//more button
Visibility(
visible: !isScreenCalledFromMyPropertiesScreen,
child: Align(
alignment: Alignment.topLeft,
child: Container(
width: 80,
height: 30,
child: SmallRoundMoreButton(onPressed: () {
Navigator.pushNamed(context, MoreHotItemsScreen.id);
}),
),
),
),
SizedBox(
height: 20,
),
],
);
}
}
And a sample page that causes random crashes when going back and forth from the HotScreen.dart .
here is SinglePlaceScreen.dart :
class SinglePlaceScreen extends StatelessWidget {
SinglePlaceScreen(
{this.place, this.isScreenCalledFromOwnerSelfRegistrationScreen = false});
static const id = 'singlePlaceScreen';
final Place place;
final bool isScreenCalledFromOwnerSelfRegistrationScreen;
final PageController pageController = PageController(initialPage: 2);
final int activePageInt = 0;
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
double getSocialMediaScreenSize() {
SocialMedia socialMedia = place.socialMedia;
double requiredScreenSpace = 0;
if (socialMedia.facebook != '') requiredScreenSpace += 140;
if (socialMedia.instagram != '') requiredScreenSpace += 140;
if (socialMedia.twitter != '') requiredScreenSpace += 140;
if (socialMedia.googlePlus != '') requiredScreenSpace += 140;
if (socialMedia.pinterest != '') requiredScreenSpace += 140;
if (socialMedia.youTube != '') requiredScreenSpace += 140;
if (socialMedia.snapChat != '') requiredScreenSpace += 140;
return requiredScreenSpace;
}
@override
Widget build(BuildContext context) {
double screenWith = MediaQuery.of(context).size.width - 30;
print('single place screen called');
return Scaffold(
key: scaffoldKey,
appBar: AppBar(
title: Text(place.name),
),
body: Container(
decoration: kPageMainBackgroundColorBoxDecoration,
child: ListView(
shrinkWrap: true,
children: <Widget>[
//column for upper button and image sections and lower comments sections
Column(
children: <Widget>[
//stack for the top image components and the middle buttons component
Stack(
alignment: Alignment.topCenter,
children: <Widget>[
TopWidgets(
place,
isScreenCalledFromOwnerSelfRegistrationScreen,
getSocialMediaScreenSize,
scaffoldKey),
//middle buttons section
Positioned(
top: 230,
child: Container(
decoration: kAppSingleItemScreenMainCardsBoxDecoration,
width: screenWith,
height: 1000 +
((place.description.length / 100) * 30) +
(place.tags.length * 5) +
getSocialMediaScreenSize(),
child: Column(
children: <Widget>[
ItemNameCircleRaterWidget(
name: place.name,
isScreenCalledFromOwnerSelfRegistrationScreen:
isScreenCalledFromOwnerSelfRegistrationScreen,
),
//tags header
TagsWidget(
tags: place.tags,
),
//descriptions header
DescriptionWidget(
description: place.address,
headerText: 'Adress',
),
DescriptionWidget(
headerText: 'Description',
description: place.description,
),
//phone number buttons
FittedBox(
child: Container(
height: 130,
child: Row(
children: <Widget>[
PhoneNumberNumberWidgets(
phoneNumbers: place.phoneNumbers,
),
PhoneNumberOwnerWidgets(
ownerOne: place.phoneNumbers[0].owner,
ownerTow: place.phoneNumbers[1].owner,
),
],
),
),
),
// Container(
// height: 300,
// child: MyGoogleMaps(place.location, place.name, isScreenCalledFromOwnerSelfRegistrationScreen),
// ),
ServicesWidget(
scaffoldKey: scaffoldKey,
services: place.services,
),
//social media section
SocialMediaWidgets(
place: place,
),
],
),
),
)
],
),
//top tow albums Sections
Albums(
place: place,
),
//lower comments section
Comments(
place: place,
),
SizedBox(
height: 30,
),
// done button
Visibility(
visible: place != null,
child: DoneButton(
onPressed: () {
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(builder: (context) => HomeScreen()),
(Route<dynamic> r) => false);
},
),
)
],
)
],
),
),
);
}
}
I would expect the app not to crash since I am not using that many Images ( 6 images of 200 KB's ).
When it crashes only "lost connection to device" is shown as an error;
Any help is appreciated guys. Thanks.
392
For long image lists or grids, I used Image.network with a reasonable cacheHeight and cacheWidth parameter (around 200 +/-). That fixed the memory increase problem for me. Otherwise I have not found a solution to this using cachedimage. Even the simplest cachednetworkimage sample code from the tutorial doesn't work if we provide it with a list of even 10 odd elements if the images are large (large a.k.a. jpgs with 2 odd Mb each). Immediately memory goes to 3-4-500Mb and then we get out of memory error.
But another issue is, Image.network does not have good error handling.
70
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
