如何在 flutter 中進行無限滾動布局？ （更新）

Question

我正在嘗試使用來自 REST API 的數據制作列表視圖，position 低於我的圖像，但布局達到其限制，所以我無法在此處創建代碼並顯示此錯誤代碼，

import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:schoolofparentingalfa/assets/color/color.dart';

class Home extends StatefulWidget {
  @override
  Home2 createState() => Home2();
}

class Home2 extends State<Home> {
  var colorsop = new Colorsop();
  var apiconfig = new ApiConfig();
  var apiClient = new ApiClient();

  @override
  void initState() {
    super.initState();
  }

  //To call list from api
  Future<List<Artikel>> getNews() async {
    // future is used to handle the error when calling api > Future + async or await
var data = await http.get(
    'https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=c4349a84570648eaa7be3cd673cc262b');

var jsonData = json.decode(data.body);

var newsData =
jsonData['articles']; //to retrieve data from articles array of api

List<Artikel> news = []; // create array

for (var data in newsData) {
  //assign data into News model array list from articles array of api
  Artikel newsItem = Artikel(
      data['title'], data['description'], data['urlToImage']);
  news.add(newsItem);
}
return news;
}




    @override
  Widget build(BuildContext context) {
    return Scaffold(

      body: Stack(children: <Widget>[
        Positioned(
          top: 0,
          child: Container(
              height: 100,
              width: MediaQuery.of(context).size.width,
              color: Colors.yellow[800],
              child: Align(
                  alignment: Alignment.center,
                  child: Text("Halo, Selamat Datang", style: TextStyle(color: Colors.white, fontSize: 25),))),
        ),

        Positioned(
            top: 90,
            bottom: 0,
            right: 0,
            left: 0,
            child: Container(
              width: MediaQuery.of(context).size.width,
              height: 600,
              decoration: BoxDecoration(
                  color: Colors.white,
                  ),
              child: GridView.count(
                crossAxisCount: 1,
                children: [
                  Container( // Container 1
                    child: Row(
                      children: <Widget>[
                        Image.asset(
                          'lib/assets/image/kelas_online.png',
                          height: 120,
                          width: 150,
                        ),
                        Image.asset(
                          'lib/assets/image/tanyaahli.png',
                          height: 120,
                          width: 150,
                        ),
                      ],
                    ),
                  ),
                  Container( // Container 2
                    child: Row(
                      children: <Widget>[
                        Image.asset(
                          'lib/assets/image/workshop_online.png',
                          height: 120,
                          width: 150,
                        ),
                        Image.asset(
                          'lib/assets/image/MitraSekolah.png',
                          height: 120,
                          width: 150,
                        ),
                      ],
                    ),
                  ),
                  Container( //Container 3
                    margin: EdgeInsets.only(top: 15, bottom: 30, left: 20),
                    padding: EdgeInsets.symmetric(horizontal: 15),
                    child: FutureBuilder(
                      future: getNews(),
                      builder: (BuildContext context, AsyncSnapshot snapshot) {
                        //snapshot is same with response
                        if (snapshot.data == null) {
                          return Container(
                            child: Center(
                              child: CircularProgressIndicator(),
                            ),
                          );
                        } else {
                          return ListView.builder(
                            itemCount: snapshot.data.length,
                            // to retrieve data as all array indexes
                            itemBuilder: (BuildContext context, int index) {
                              // is same with holder

                              return InkWell(
                                // Inkwell is used to apply card view
                                onTap: () {
                                  Artikel news = new Artikel(snapshot.data[index].post_link, snapshot.data[index].description, snapshot.data[index].post_image);//is used to onclick

                                  Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                          builder: (context) => new Details(news: news)
                                      ));
                                },

                                child: Card(
                                  child: Row(
                                    children: <Widget>[
                                      Container(
                                        width: 120.0,
                                        height: 110.0,
                                        child: ClipRRect(
                                          //for corner radius
                                          borderRadius:
                                          BorderRadius.all(Radius.circular(8)),

                                          //to retrieve image from array
                                          child: snapshot.data[index].post_image == null
                                              ? Image.network(
                                              'https://cdn2.vectorstock.com/i/1000x1000/70/71/loading-icon-load-icon-wait-for-a-wait-please-wait-vector-24247071.jpg')
                                              : Image.network(
                                            snapshot.data[index].post_image,
                                            width: 100,
                                            fit: BoxFit.fill,
                                          ),
                                        ),
                                      ),
                                      Expanded(
                                        child: ListTile(
                                          //include title and subtitle
                                          title: Text(snapshot.data[index].post_title),
                                          subtitle: Text(snapshot.data[index].post_link == null
                                              ? 'Unknown Author'
                                              : snapshot.data[index].post_link),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              );
                            },
                          );
                        }
                      },
                    ),
                  ),
                ],
              ),
            )
        )
      ],),

    );
  }
}


}

class Details extends StatelessWidget{
  final Artikel news;

  Details({this.news}); // create constructor
  @override
  Widget build(BuildContext context) {
return Scaffold(
  body: Center(
    child: Container(
      child: Column(
        children: <Widget>[

          Stack( //little same with expanded
            children: <Widget>[
              Container(
                height: 400,
                child: Image.network('${this.news.post_image}',
                  fit: BoxFit.fill,),
              ),
              AppBar(
                backgroundColor: Colors.transparent,
                leading: InkWell(
                  child: Icon(Icons.arrow_back_ios),
                  onTap: () => Navigator.pop(context),
                ),

                elevation: 0,

              )
            ],
          ),

          Padding(
            padding: const EdgeInsets.all(8),
            child: Column(
              children: <Widget>[

                SizedBox( // for title
                  height: 10,
                ),
                Text(
                  '${this.news.post_title}',
                  style: TextStyle(
                      color: Colors.black87,
                      fontWeight: FontWeight.bold,
                      fontSize: 20,
                      letterSpacing: 0.2,
                      wordSpacing: 0.6
                  ),
                ),

                SizedBox( // for description
                  height: 20,
                ),
                Text(
                  this.news.post_link,
                  style: TextStyle(
                      color: Colors.black54,
                      fontSize: 16,
                      letterSpacing: 0.2,
                      wordSpacing: 0.3
                  ),
                )

              ],
            ),
          )

        ],
      ),
    ),
  ),
);


 }
}

class Artikel {


final String post_title;
  final String post_link;
  final String post_image;

  //Alt+insert > constructor

  Artikel(this.post_title, this.post_link, this.post_image);
}

誰能幫我？

更新的屏幕截圖.................................................. .....................................

Answer 1

您可以替換代碼並檢查

 return Scaffold(

     body: Stack(children: <Widget>[
      Positioned(
        top: 0,
              child: Container(
                height: 100,
                width: MediaQuery.of(context).size.width,
                color: Colors.yellow[800],
                child: Align(
                  alignment: Alignment.center,
                  child: Text("Halo, Selamat Datang", style: TextStyle(color: Colors.white, fontSize: 25),))),
      ),

      Positioned(
        top: 90,
        bottom: 0,
        right: 0,
        left: 0,
              child: Container(
                width: MediaQuery.of(context).size.width,
               height: 600,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(topLeft:Radius.circular(20), topRight:Radius.circular(20)) ),
                  child:
                  GridView.count(
      crossAxisCount: 2,
      children: List.generate(5, (index) {
      return  Padding(
        padding: const EdgeInsets.all(24.0),
        child: GridTile(child: Image.network("https://upload.wikimedia.org/wikipedia/commons/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg"),),
      );
      }) ,),)
      )
     ],),
     
     );