Listview inside the scroll view in flutter

ayub baba picture ayub baba · Jul 10, 2018 · Viewed 16.5k times · Source

I am trying to make this type of view

there 3 types of news latest,sport and old news which are having 3 listview the data is populating but i am unable to scroll it the list view or the complete scroll view is not scrolling i had trying it from the 1 week please find the below code

This type of layout

I am able to the layout but it's not scrolling at all

First tab view

class First_Tab_Layout extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    First_State fst_state() => new First_State();
    return fst_state();
  }
}

class First_State extends State<First_Tab_Layout> {
  List latest_news_list;
  List sports_news_list;
  List cinema_news_list;

  latestnews() async {
    var latest_news_url = common_url + 'getlatestPosts';
    print(latest_news_url);
    http.Response latest_newsresponse = await http.get(latest_news_url);
    var latest_news_response = json.decode(latest_newsresponse.body);
    setState(() {
      latest_news_list = latest_news_response['posts'];
    });
  }

  sportsnews() async {
    var sports_news_url = common_url + 'getsportsPosts';
    print(sports_news_url);
    http.Response sports_newsresponse = await http.get(sports_news_url);
    var sports_news_response = json.decode(sports_newsresponse.body);
    setState(() {
      sports_news_list = sports_news_response['posts'];
    });
  }

  cinemanews() async {
    var cinema_news_url = common_url + 'getcinemaPosts';
    print(cinema_news_url);
    http.Response cinema_newsresponse = await http.get(cinema_news_url);
    var cinema_news_response = json.decode(cinema_newsresponse.body);
    setState(() {
      cinema_news_list = cinema_news_response['posts'];
    });
  }

  @override
  void initState() {
    super.initState();
    latestnews();
    sportsnews();
    cinemanews();
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
          body: new ListView(
        primary: true,
        children: <Widget>[
          new Container(
            child: new Text(
              'Latest News',
              style: new TextStyle(fontSize: 16.0),
            ),
            margin: EdgeInsets.only(left: 10.0, right: 10.0, bottom: 5.0),
            alignment: Alignment(-1.0, 0.0),
          ),
          new Container(
            child: new Divider(
              color: secondarycolor,
            ),
            margin: EdgeInsets.only(right: 10.0, left: 10.0),
          ),
          new Container(
            child: new ListView.builder(
              shrinkWrap: true,
              itemCount: latest_news_list == null ? 0 : latest_news_list.length,
              itemBuilder: (BuildContext context, int indexpos) {
                return new GestureDetector(
                  onTap: () {
                    Navigator.push(
                        context,
                        new MaterialPageRoute(
                            builder: (context) => new News_Details(
                                  postid: latest_news_list[indexpos]['id'],
                                )));
                  },
                  child: new Card(
                    elevation: 4.0,
                    margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
                    child: new Row(
                      children: <Widget>[
                        new Container(
                          child: new Image.network(
                            latest_news_list[indexpos]['image'],
                            width: 150.0,
                            fit: BoxFit.fill,
                          ),
                        ),
                        new Flexible(
                          child: new Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              new Container(
                                child: new Text(
                                    latest_news_list[indexpos]['title']),
                                margin: EdgeInsets.only(left: 10.0),
                              ),
                              new Container(
                                child: new Text(
                                  latest_news_list[indexpos]['content'],
                                  softWrap: true,
                                  maxLines: 4,
                                ),
                                margin: EdgeInsets.only(left: 10.0, top: 5.0),
                              ),
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
          new Container(
            child: new Text(
              'Sports News',
              style: new TextStyle(fontSize: 16.0),
            ),
            margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
            alignment: Alignment(-1.0, 0.0),
          ),
          new Container(
            child: new Divider(
              color: secondarycolor,
            ),
            margin: EdgeInsets.only(right: 10.0, left: 10.0),
          ),
          new Container(
            child: new ListView.builder(
              shrinkWrap: true,
              itemCount: sports_news_list == null ? 0 : sports_news_list.length,
              itemBuilder: (BuildContext context, int indexpos) {
                return new GestureDetector(
                  child: new Card(
                    elevation: 4.0,
                    margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
                    child: new Row(
                      children: <Widget>[
                        new Container(
                          child: new Image.network(
                            sports_news_list[indexpos]['image'],
                            width: 150.0,
                            height: 75.0,
                            fit: BoxFit.fill,
                          ),
                        ),
                        new Column(
                          children: <Widget>[
                            new Container(
                              child:
                                  new Text(sports_news_list[indexpos]['title']),
                              margin: EdgeInsets.only(left: 10.0),
                            ),
                            new Container(
                              child:
                                  new Text(sports_news_list[indexpos]['title']),
                              margin: EdgeInsets.only(left: 10.0, top: 5.0),
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
          new Container(
            child: new Text(
              'Cinema News',
              style: new TextStyle(fontSize: 16.0),
            ),
            margin: EdgeInsets.only(
                left: 10.0, right: 10.0, top: 10.0, bottom: 5.0),
            alignment: Alignment(-1.0, 0.0),
          ),
          new Container(
            child: new Divider(
              color: secondarycolor,
            ),
            margin: EdgeInsets.only(right: 10.0, left: 10.0),
          ),
          new Container(
            child: new ListView.builder(
              shrinkWrap: true,
              itemCount: cinema_news_list == null ? 0 : cinema_news_list.length,
              itemBuilder: (BuildContext context, int indexpos) {
                return new GestureDetector(
                  child: new Card(
                    elevation: 4.0,
                    margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
                    child: new Row(
                      children: <Widget>[
                        new Container(
                          child: new Image.network(
                            cinema_news_list[indexpos]['image'],
                            width: 150.0,
                            height: 75.0,
                            fit: BoxFit.fill,
                          ),
                        ),
                        new Column(
                          children: <Widget>[
                            new Container(
                              child: new Text(
                                  cinema_news_list[indexpos]['categorytitle']),
                              margin: EdgeInsets.only(left: 10.0),
                            ),
                            new Container(
                              child: new Text(
                                  cinema_news_list[indexpos]['categorytitle']),
                              margin: EdgeInsets.only(left: 10.0, top: 5.0),
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      )),
    );
  }
}

Answer

Ayoob Khan picture Ayoob Khan · Dec 30, 2018

This worked for me. Not sure whether this will work for you. Try once. I just added physics to inner ListView.

new Container(
            child: new ListView.builder(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),