我已经构建了一个非常复杂的Flutter应用程序，直到我开始从位于AWS上的api获取图像之前，一切都运转良好。但是在用实际数据填充image.network小部件和cached_network_image之后，当我导航到其他包含图像的页面时，我开始随机崩溃，并且崩溃更多。
Flutter仅显示“与设备的连接断开”并没有显示任何错误。
我正在两个iOS和iOS设备上测试此应用程序，这是一样的：很多崩溃。
每张图像的大小约为200-400 KB，但是即使在屏幕上显示6张图像，也会发生崩溃。
起初我并不知道崩溃是由图像引起的，所以我尝试了很多方法并更改了很多代码。就像使我的大多数小部件都变为无状态一样，请尝试将Cached_Network_Image更改为Image.Network小部件，使小部件更小，以便在处于设置状态时进行重建时不会占用大量内存。我还尝试使用devTools诊断问题以了解面纱。
devTools仅在应用程序崩溃之前显示内存激增。
我现在确定图像是导致这些崩溃的原因。
这是main.js中的代码 不包括进口，不过我可以根据需要提供。
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条其他路线
HotScreen.dart，其中大多数崩溃是在往返其他路线时发生的：
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);
});
}
}
}
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,
),
],
);
}
}
还有一个示例页面，该页面在从HotScreen.dart来回移动时会导致随机崩溃。
这是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);
},
),
)
],
)
],
),
),
);
}
}
我希望该应用程序不会崩溃，因为我没有使用太多图像（200 KB的6张图像）。
当它崩溃时，只会显示“与设备的连接断开”错误；
任何帮助都是值得赞赏的家伙。 谢谢。
答案 0 :(得分：1)
对于长图像列表或网格，我使用了具有合理的cacheHeight和cacheWidth参数（大约200 +/-）的Image.network。这为我解决了内存增加的问题。否则，我没有找到使用cachedimage的解决方案。如果我们为图像提供了大到10个奇数元素的列表（每个大jpg图像每个都有2个奇数Mb），那么即使是本教程中最简单的cachednetworkimage示例代码也无法正常工作。立即内存达到3-4-500Mb，然后我们出现内存不足错误。
但是另一个问题是，Image.network没有很好的错误处理。
答案 1 :(得分：0)
图像可能只是潜在问题的体现。您说自己有20条路线。提取数据时如何管理状态。除了图像之外，您似乎仍在使用网络来获取其他数据，这可能会导致大量资源使用。 200-400KB的6个图像很小。由于image.asset和CacheNetworkImage小部件都存在问题，因此我怀疑问题是您不缓存已获取的数据。可能，每次您向上滚动时，都会发现空白，从而导致再次获取资源。 Listview.builder按需构建。