当 cached_network_image 或 Image.Network 填充数据时，Flutter 应用程序崩溃很多，仅显示与设备的连接丢失而已
Posted
技术标签:
【中文标题】当 cached_network_image 或 Image.Network 填充数据时，Flutter 应用程序崩溃很多，仅显示与设备的连接丢失而已【英文标题】：Flutter app crashes a lot when cached_network_image Or Image.Network is populated with data , just showing lost connection to device nothing more 【发布时间】：2020-02-08 12:23:20 【问题描述】：我已经构建了一个足够复杂的颤振应用程序，在我开始从位于 AWS 上的 api 获取图像之前，一切都运行良好。但是在使用实际数据填充 image.network 小部件和 cached_network_image 之后，当导航到其他包含图像的页面时，我开始随机出现很多崩溃并且更多。
Flutter 没有向我显示任何错误，只是“失去与设备的连接”。
我正在 android 和 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);
,
),
)
],
)
],
),
),
);
我希望应用程序不会崩溃，因为我没有使用那么多图片（6 张 200 KB 的图片）。
当它崩溃时，只有“失去与设备的连接”才会显示为错误；
感谢任何帮助。 谢谢。
【问题讨论】：
嗨@Dyary，你的问题解决了吗？ 我面临着完全相同的问题。你确定这是图片相关的问题吗？ 这是一个与图像相关的问题，它也发生在我身上。使用 cacheHeight 和 cacheWidth 可能会解决问题，但它会不断闪烁 也有这个问题。如果我找到解决方案，我会回复。这似乎是一个挑战，也是我的应用程序的重要组成部分。 【参考方案1】：对于长图像列表或网格，我使用 Image.network 和合理的 cacheHeight 和 cacheWidth 参数（大约 200 +/-）。这解决了我的内存增加问题。否则我还没有找到使用缓存图像的解决方案。如果我们为它提供一个包含偶数 10 个奇数元素的列表，如果图像很大（大的 a.k.a. jpg，每个 2 奇数 Mb），即使教程中最简单的缓存网络图像示例代码也不起作用。内存立即达到 3-4-500Mb，然后出现内存不足错误。
但另一个问题是，Image.network 没有很好的错误处理。
【讨论】：
我很想知道您是否在这里找到了适合您的设置的解决方案。如果您有，请告诉我们。谢谢 我刚刚使用了提到的解决方法。但是新版本的 CachedNetworkImage 是在 4 月底 5 月初发布的。 谢谢，使用 Image.network 并减少 'cacheHeight' 和 'cacheWidth' 为我解决了问题。【参考方案2】：图片可能只是潜在问题的表现。你说你有超过20条路线。获取数据时如何管理状态。除了图像，您似乎仍在使用网络来获取其他数据，这可能会导致高资源使用率。 6 张 200-400KB 的图像相当小。由于您对 image.asset 和 CacheNetworkImage 小部件都有问题，我怀疑问题是您没有缓存您获取的数据。可能，每次您向上滚动时，您都会发现空格，这会导致再次获取资源。 Listview.builder 按需构建。
【讨论】：
【参考方案3】：您可以使用cached_network_image。设置
memCacheHeight 和 memCacheWidth
CachedNetworkImage 的属性。 这适用于加载大量图像。
【讨论】：
以上是关于当 cached_network_image 或 Image.Network 填充数据时，Flutter 应用程序崩溃很多，仅显示与设备的连接丢失而已的主要内容，如果未能解决你的问题，请参考以下文章
如何减少 Flutter App 中的 Firestore 读取？