英文:
Flutter: Display two FutureBuilders data one after another in a single page
问题
我有两个FutureBuilder数据需要在同一个页面上依次显示，即我想要将第二个FutureBuilder数据附加到第一个上。当我使用以下代码时，它将屏幕分为两个固定部分，上半部分显示第一个FutureBuilder数据，下半部分显示第二个FutureBuilder数据，并且两者可以分别滚动。如果我使用body: SingleChildScrollView而不是body: SafeArea，则结果输出是一个白屏（屏幕上没有数据），并在控制台中出现错误。
Failed assertion: line 2009 pos 12: 'hasSize' The relevant error-causing widget was Scaffold
以下是完整的程序：
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
class GetUserData extends StatefulWidget {
const GetUserData({Key? key});
@override
State<GetUserData> createState() => _GetUserDataState();
}
class _GetUserDataState extends State<GetUserData> {
Future<List<dynamic>> getUserData() async {
String url = 'https://telugu-signaler.000webhostapp.com/get_user.php';
var response = await http.post(Uri.parse(url), body: '');
var allUserData = jsonDecode(response.body.toString());
return allUserData;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Get User Data'),
),
body: SafeArea(
child: Column(
children: <Widget>[
Expanded(
flex: 8,
child: FutureBuilder<List<dynamic>>(
future: getUserData(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: GridView.builder(
shrinkWrap: true,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
mainAxisExtent: 150.0,
),
itemCount: snapshot.data!.length,
itemBuilder: (context, index) {
String userFirstName =
snapshot.data![index]['user_first_name'];
String userLastName =
snapshot.data![index]['user_last_name'];
return Column(
children: [
Container(
color: Colors.lightBlue,
child: Text(
'First Name: $userFirstName',
style: TextStyle(fontSize: 30),
),
),
Container(
color: Colors.lightBlue,
child: Text(
'Last Name: $userLastName',
style: TextStyle(fontSize: 30),
),
),
],
);
},
),
);
}
return const Center(
child: CircularProgressIndicator(),
);
},
),
),
Expanded(
flex: 8,
child: FutureBuilder<List<dynamic>>(
future: getUserData(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: GridView.builder(
shrinkWrap: true,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisExtent: 150.0,
),
itemCount: snapshot.data!.length,
itemBuilder: (context, index) {
String userDistrict =
snapshot.data![index]['user_district'];
String userState =
snapshot.data![index]['user_state'];
return Column(
children: [
Container(
color: Colors.lightGreen,
child: Text(
'District: $userDistrict',
style: TextStyle(fontSize: 30),
),
),
Container(
color: Colors.lightGreen,
child: Text(
'State: $userState',
style: TextStyle(fontSize: 30),
),
),
],
);
},
),
);
}
return const Center(
child: CircularProgressIndicator(),
);
},
),
),
],
),
),
);
}
}
希望这对你有所帮助！
英文:
I have two FutureBuilder data to be displayed in a single page one after another i.e. I want to append second FutureBuilder data to first one. When I use the following code, it divides the screen into two fixed parts the upper half displays the first FutureBuilder data and the lower half displays the second FutureBuilder data and both are scrollable separately. If I use body:SingleChildScrollView instead body:SafeArea the resulting output is a white screen (no data on screen) with error in console
>Failed assertion: line 2009 pos 12: 'hasSize' The relevant error-causing widget was Scaffold
Here is the complete program:
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
class GetUserData extends StatefulWidget {
const GetUserData({super.key});
@override
State<GetUserData> createState() => _GetUserDataState();
}
class _GetUserDataState extends State<GetUserData> {
Future<List> getUserData() async {
String url = 'https://telugu-signaler.000webhostapp.com/get_user.php';
var response = await http.post(Uri.parse(url), body: '');
var allUserData = jsonDecode(response.body.toString());
return allUserData;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Get User Data'),
),
body: SafeArea(
child: Column(
children: <Widget>[
Expanded(
flex: 8,
child: FutureBuilder<List<dynamic>>(
future: getUserData(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: GridView.builder(
shrinkWrap: true, //add this line
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
mainAxisExtent: 150.0,
),
itemCount: snapshot.data!.length,
itemBuilder: (context, index) {
String userFirstName =
snapshot.data![index]['user_first_name'];
String userLastName =
snapshot.data![index]['user_last_name'];
return Column(
children: [
Container(
color: Colors.lightBlue,
child: Text(
'First Name: $userFirstName',
style: TextStyle(fontSize: 30),
),
),
Container(
color: Colors.lightBlue,
child: Text(
'Last Name: $userLastName',
style: TextStyle(fontSize: 30),
),
),
],
);
},
),
);
}
return const Center(
child: CircularProgressIndicator(),
);
},
),
),
Expanded(
flex: 8,
child: FutureBuilder<List<dynamic>>(
future: getUserData(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: GridView.builder(
shrinkWrap: true, //add this line
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisExtent: 150.0,
),
itemCount: snapshot.data!.length,
itemBuilder: (context, index) {
String userDistrict =
snapshot.data![index]['user_district'];
String userState =
snapshot.data![index]['user_state'];
return Column(
children: [
Container(
color: Colors.lightGreen,
child: Text(
'District: $userDistrict',
style: TextStyle(fontSize: 30),
),
),
Container(
color: Colors.lightGreen,
child: Text(
'State: $userState',
style: TextStyle(fontSize: 30),
),
),
],
);
},
),
);
}
return const Center(
child: CircularProgressIndicator(),
);
},
),
),
],
),
),
);
}
}
答案1
得分: 0
你在同一弹性的列中扩展了2个小部件。所以屏幕分隔是正常的。你必须移除扩展的小部件。然后通过在GridView中添加physics: NeverScrollableScrollPhysics()来禁用滚动。接着将SafeArea更改为SingleChildScrollView。
英文:
You expanded 2 widgets in column with same flex. So it's normal to split screen. You have to remove Expanded widgets. Then disable scrolling on GridViews by adding physics: NeverScrollableScrollPhysics() to GridView. Then change the SafeArea with SingleChildScrollView.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论