在刷卡器中从 php 加载图像时出现空错误
Posted
技术标签:
【中文标题】在刷卡器中从 php 加载图像时出现空错误【英文标题】：Null error on loading image from php in card swiper 【发布时间】：2022-01-21 20:17:39 【问题描述】：这是主页功能，我在其中为轮播图像添加了图像滑块（刷卡器），图像是从 php 网络加载的，但图像无法加载并抛出 null 错误及其正文在下一个函数中加载，代码如下：
class Home extends StatefulWidget
Home(
Key? key,
required this.body,
) : super(key: key);
final body;
@override
_HomeState createState() => _HomeState();
class _HomeState extends State<Home>
Future<List<ModelEbook>>? getSlider;
List<ModelEbook> listSlider = [];
@override
void initState()
super.initState();
getSlider = fetchEbook(listSlider);
@override
Widget build(BuildContext context)
return Container(
child: SingleChildScrollView(
child: FutureBuilder(
future: getSlider,
builder:
(BuildContext context, AsyncSnapshot<List<ModelEbook>> snapshot)
if (snapshot.connectionState == ConnectionState.done)
//displays data here
return Column(
children: [
//Slider
// ImageSlider(),
Container(
child: FutureBuilder(
future: getSlider,
builder: (BuildContext context,
AsyncSnapshot<List<ModelEbook>> snapshot)
if (snapshot.connectionState == ConnectionState.done)
//Create design in here
return SizedBox(
height: 27.0.h,
child: Swiper(
autoplay: true,
itemCount: snapshot.data!.length,
itemBuilder: (BuildContext context, int index)
// ModelEbook _ = snapshot.data![index];
return GestureDetector(
onTap: () ,
child: Padding(
padding: EdgeInsets.all(10),
child: Container(
child: Stack(
children: [
ClipRRect(
child: Image.network(
listSlider[index].photo,
fit: BoxFit.cover,
width: 100.0.w,
),
borderRadius:
BorderRadius.circular(15),
),
],
),
),
),
);
,
),
);
else
return Container();
,
),
),
],
);
else if (snapshot.connectionState == ConnectionState.waiting)
return Center(child: CircularProgressIndicator());
else
print('error');
return Text('error');
,
),
),
);
这是上述函数的主体，其中我还添加了自定义应用栏和底部导航栏：
class _HomeScreenState extends State<HomeScreen>
bool _folded = true;
get currentIndex => null;
@override
Widget build(BuildContext context)
return Scaffold(
body: AnimatedContainer(
duration: Duration(milliseconds: 250),
color: Colors.blueGrey.shade100,
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: SvgPicture.asset(
"assets/icons/menu.svg",
),
onPressed: () ,
),
Padding(
padding: const EdgeInsets.only(left: 110),
child: Container(
width: _folded ? 52 : 250,
height: getProportionateScreenHeight(50),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(32),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.brown.shade300.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(-4, 0),
),
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(4, 0),
),
BoxShadow(
color: Colors.brown.shade300.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(-4, 0),
),
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(4, 0),
),
]),
child: Row(
children: [
Expanded(
child: Container(
padding: EdgeInsets.only(left: 16),
child: !_folded
? TextField(
decoration: InputDecoration(
hintText: 'Search Book, Author,Genre ',
hintStyle: TextStyle(
color: Colors.black54,
fontFamily:
GoogleFonts.oregano().fontFamily,
),
border: InputBorder.none,
),
)
: null,
),
),
AnimatedContainer(
duration: Duration(milliseconds: 400),
child: Material(
type: MaterialType.transparency,
child: InkWell(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(_folded ? 32 : 0),
topRight: Radius.circular(32),
bottomLeft: Radius.circular(_folded ? 32 : 0),
bottomRight: Radius.circular(32),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: SvgPicture.asset(
_folded
? "assets/icons/search.svg"
: "assets/icons/close.svg",
height: getProportionateScreenHeight(18),
color: Colors.black54),
),
onTap: ()
setState(()
_folded = !_folded;
);
),
),
),
],
),
),
),
],
),
Expanded(
child: Home(
body: currentIndex,
),
),
Expanded(
child: BottomDrawer(),
),
],
),
),
);
这是运行上述命令后显示的错误
这是运行上述命令后模拟器上显示的错误
Future<List<ModelEbook>> fetchEbook(List<ModelEbook> fetch) async
print(
"baseUrl $ApiConstant().baseUrl + ApiConstant().api +
ApiConstant().latest");
var request = await Dio()
.get(ApiConstant().baseUrl + ApiConstant().api +
ApiConstant().latest);
for (Map<String, dynamic> ebook in request.data)
fetch.add(
ModelEbook(
id: ebook['id'],
title: ebook['title'],
photo: ebook['photo'],
description: ebook['description'],
catId: ebook['cat_id'],
statusNews: ebook['status_newsNews'],
pdf: ebook['pdf'],
date: ebook['date'],
authorName: ebook['author_name'],
publisherName: ebook['publisher_name'],
pages: ebook['pages'],
language: ebook['language'],
rating: ebook['rating'],
free: ebook['free'],
),
);
print("checkEbookFromDB $ebook['photo']");
return fetch;
class ApiConstant
String baseUrl = "http://i.p address(here)/ebookapp/";
String api = "api.php?";
String slider = "slider";
String latest = "latest";
【问题讨论】：
首先，您需要检查图片链接在浏览器中是否有效。 它从 php 加载 你能分享来自 API 的 JSON 响应吗？？ 我添加了API部分 class ApiConstant String baseUrl = "ip/ebookapp";字符串 api = "api.php?";字符串滑块 = "滑块";字符串最新 = "最新"; 【参考方案1】：您不需要调用两次 API 来获取相同的数据，使用父快照作为内部子节点并遵循 FutureBuilder 结构。这种情况下调用future initState不提供数据，可以再创建一个async方法来处理，不过这样会很简单，不需要使用initState
class _HomeState extends State<Home>
@override
void initState()
super.initState();
@override
Widget build(BuildContext context)
return Container(
child: SingleChildScrollView(
child: FutureBuilder(
future: fetchEbook(),
builder:
(BuildContext context, AsyncSnapshot<List<ModelEbook>> snapshot)
if (snapshot.connectionState == ConnectionState.done &&
snapshot.hasData)
//displays data here
return Column(
children: [
//Slider
// ImageSlider(),
Container(
child: SizedBox(
height: 27.0.h,
child: Swiper(
autoplay: true,
itemCount: snapshot.data!.length,
itemBuilder: (BuildContext context, int index)
// ModelEbook _ = snapshot.data![index];
return GestureDetector(
onTap: () ,
child: Padding(
padding: EdgeInsets.all(10),
child: Container(
child: Stack(
children: [
ClipRRect(
child: Image.network(
snapshot.data![index].photo,
fit: BoxFit.cover,
width: 100.0.w,
),
borderRadius: BorderRadius.circular(15),
),
],
),
),
),
);
,
),
),
),
],
);
else if (snapshot.connectionState == ConnectionState.waiting)
return Center(child: CircularProgressIndicator());
else
print('error');
return Text('error');
,
),
),
);
由于不确定的未来，最好从fetchEbook 返回可空列表。
更多关于FutureBuilder
【讨论】：
未来：fetchEbook()，显示位置参数错误 为您的案例传递空列表，或者像您在州级List<ModelEbook> listSlider = []; 上所做的那样清除该列表并传递未来 fetchEbook (listSlider )
它现在只加载那个圆形指示器，但没有什么能够从网络上获取它可能是什么我在哪里做错了在屏幕上加载完成它的书面错误之后
可能退出，可以在控制台打印/调试数据，不要在futureBuilder中使用setState以上是关于在刷卡器中从 php 加载图像时出现空错误的主要内容，如果未能解决你的问题，请参考以下文章
PHP exec |尝试设置DBUS_SESSION_BUS_ADDRESS时出现空字节错误
Flutter Firestore - 获取存储为字符串的 URL 时出现空安全错误