В качестве моего первого проекта Flutter я создаю приложение для газеты. Есть несколько категорий новостей. Для этих категорий я создал шаблон c Widget, на главном экране которого Widget будет отображаться несколько раз для нескольких категорий в Listview, эти категории Widgets содержат Listview в них. как я принес несколько новостей из этих категорий. Класс Widget, у которого есть этот родовой c Widget, равен Newsfeed.dart, который будет указан ниже.
Этот родовой c Widget вызывается из другого Widget класса WidgetFactory.dart который фактически вызывает API и создает домашний экран, используя вышеупомянутый шаблон c Widget для категорий. Этот класс использует Listview.builder, который находится внутри FutureBuilder.
Проблема в том, что когда я открываю приложение на экране, появляется новость, но я не могу прокрутить, она остается фиксированной. Я проверил, действительно ли API выводит новости, в консоли я напечатал ответ API, все новости извлечены, но я все еще не могу прокрутить.
поток main.dart -> WidgetFactory () -> Newsfeed ()
WidgetFactory ()
class WidgetFactory extends StatefulWidget {
@override
_WidgetFactoryState createState() => _WidgetFactoryState();
}
class _WidgetFactoryState extends State<WidgetFactory> {
List homeScreenCategories = [4, 14, 13, 23, 8015, 22];
Future<List> newsPostList;
List<List<NewsPost>> categoryNewsPostList;
@override
void initState() {
super.initState();
newsPostList = fetchNews();
}
@override
Widget build(BuildContext context) {
SizeConfig().init(context);
return Container(
alignment: Alignment.center,
child: Container(
child: RefreshIndicator(
child: FutureBuilder(
future: newsPostList,
builder: (BuildContext context, AsyncSnapshot snapshot) {
if(snapshot.data == null) {
return Container(
child: CircularProgressIndicator()
);
} else {
return ListView.builder(
shrinkWrap: true,
physics: const AlwaysScrollableScrollPhysics(),
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return _getCategoryNews(snapshot, index);
},
);
}
},
),
onRefresh: () {
fetchNews();
}
),
),
);
}
Future<List> fetchNews() async {
String url = "url";
Response response = await Dio().get(url);
if(response.statusCode == 200) {
List newsPostList = [];
for(int i=0; i<response.data.length; i++) {
newsPostList.add(response.data[i]);
}
return newsPostList;
} else {
throw Exception("Failed to fetch category");
}
}
Widget _getCategoryNews(snapshot, int index) {
List<NewsPost> newsPostList = [];
for(var c in snapshot.data[index]['items']) {
NewsPost newsPost = NewsPost.getNewsPostFromAPI(c);
newsPostList.add(newsPost);
}
return Newsfeed(newsPostList, "National");
}
}
Newsfeed ()
class Newsfeed extends StatefulWidget {
String categoryName;
List<NewsPost> newsPostList;
Newsfeed(this.newsPostList, this.categoryName);
@override
_NewsfeedState createState() => _NewsfeedState(this.newsPostList, this.categoryName);
}
class _NewsfeedState extends State<Newsfeed> {
final GlobalKey<ScaffoldState> _scaffoldKeyTwo = new GlobalKey<ScaffoldState>(debugLabel: '_MainScreenKey');
String categoryName;
_NewsfeedState(this.newsPostList, this.categoryName);
List<NewsPost> newsPostList;
var dio = new Dio();
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
SizeConfig().init(context);
return Container(
alignment: Alignment.center,
child: ListView.builder(
shrinkWrap: true,
itemCount: newsPostList.length,
itemBuilder: (BuildContext context, int index) {
print(newsPostList[index]);
return _getNewsPostWidgets(index);
}
),
);
}
Widget _getNewsPostWidgets(int index) {
var newsPost = newsPostList[index];
if(index < 5) {
if(index == 0) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
ScaleTransitionRoute(
page: NewsPostDetails(newsPostList, index)
)
);
},
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
//constraints: BoxConstraints(minWidth: double.infinity, maxWidth: double.infinity),
constraints: BoxConstraints.expand(
width: double.infinity,
height: 40
),
color: const Color(0xFF2b4849),
child: Text(
this.categoryName,
style: TextStyle(
fontSize: 33,
color: Colors.white
),
),
),
BlockHeadline(newsPost)
],
)
);
}
else {
return GestureDetector(
onTap: () {
Navigator.push(
context,
ScaleTransitionRoute(
page: NewsPostDetails(newsPostList, index)
)
);
},
child: ListedNews(newsPost),
);
}
}
else {
return Container(
color: const Color(0xFF2b4849),
child: index == 5 ? FlatButton(
child: Text(
"See More",
style: TextStyle(
color: Colors.white
),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => NewsFeedForSpecificCategory(newsPostList)
)
);
},
) : Container(),
);
}
}
openNewsPostDetails(List<NewsPost> newsPostList, int index) {
Navigator.push(
context,
ScaleTransitionRoute(
page: NewsPostDetails(newsPostList, index)
)
);
}
}
Что я пробовал
Я нашел несколько вопросов, которые касаются этой проблемы немного. Пробовал те.
- Я использовал
shrinkwrap=true в моем Listview.builder, но бесполезно. - Пробовал использовать
Column внутри SingleChildScrollView(), все еще не работал. - Внутри
Listview.builder добавлено physics как AlwaysScrollable(), также напрасно.
Поскольку я новичок, чтобы трепетать то, что я пробовал, может показаться глупым.
Еще одна вещь - это новости, которые появляются на главном экране, которые выводят меня на страницу с подробными сведениями, а пролистывание влево и вправо приводит меня к другим новостям. Это домашний экран, который вызывает проблемы, а не прокручивает.
Было бы здорово помочь, если бы вы любезно дали некоторые подсказки.