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.