how to give my list view width to full screen widt

问题:

how to give my list view width to full screen width and how to make it auto scroll after few second ...

 void scrollAfter(ScrollController scrollController, {int seconds}) {
    Future.delayed(Duration(seconds: seconds), () {
      var offset = 550.0;
      var scrollDuration = Duration(seconds: 2);
      scrollController.animateTo(offset,
          duration: scrollDuration, curve: Curves.ease);
    });
  }
  @override
  Widget build(BuildContext context) {
    var scrollController = ScrollController();
    scrollAfter(scrollController, seconds: 2);
    // TODO: implement build
    return Container(child:
    new StreamBuilder(
        stream: Firestore.instance.collection('Top List').snapshots(),
        builder: (BuildContext context,snapshot) {
          if (!snapshot.hasData) return new Text("no");
          var documentsLength = snapshot.data.documents.length;
          return ListView.builder(itemCount: documentsLength,
              scrollDirection: Axis.horizontal,
              controller: scrollController,
              shrinkWrap: true,
              itemBuilder: (context, index) {

                return buildlistItem((AllProduct.fromDocument(snapshot.data.documents[index])));

              });

below my buildlistItem class form which i want to scroll ######################################################################################################################################################################################################################################################################

 Widget buildlistItem(AllProduct alllist) {

    return
      new GestureDetector(
        child: Container(
          child: new Card(
            elevation: 2.0,
            margin: const EdgeInsets.all(5.0),
            child: new Stack(
              alignment: Alignment.center,
              children: <Widget>[
                new Hero(
                  tag: alllist.title,
                  child: new Image.network(alllist.backgroundImageUrl, fit: BoxFit.cover),
                ),
                new Align(
                  child: new Container(
                    padding: const EdgeInsets.all(6.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        new Column(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            new Text(alllist.title,
                                style: new TextStyle(color: Colors.white,fontFamily: "ChelaOne-Regular")),

                          ],
                        ),
                        IconButton(onPressed: (){


                        },
                          icon: new Icon(Icons.add_shopping_cart,color: Colors.white,),
                        )
                      ],
                    ),
                    color: Colors.black.withOpacity(0.4),
                  ),
                  alignment: Alignment.bottomCenter,
                ),
              ],
            ),
          ),
        ),
        onTap: () {},
      );
  }
}

回答1:

You can use ScrollController to achieve the auto-scrolling part. Please refer the below example.

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var scrollController = ScrollController();
    var listView = ListView.builder(
      itemBuilder: (context, index) => Text("$index"),
      controller: scrollController,
    );
    scrollAfter(scrollController, seconds: 2);
    return MaterialApp(
        title: 'Trial',
        home: Scaffold(
            appBar: AppBar(title: Text('List scroll')), body: listView));
  }

  void scrollAfter(ScrollController scrollController, {int seconds}) {
    Future.delayed(Duration(seconds: seconds), () {
      var offset = 550.0;
      var scrollDuration = Duration(seconds: 2);
      scrollController.animateTo(offset,
          duration: scrollDuration, curve: Curves.ease);
    });
  }
}

回答2:

You can use Column or Row Widget to align children vertically or horizontally. Regrading expanding list content to to full width you can use Expanded widget. Achieving automatic scrolling is pretty simple. ListView widget accepts a parameter of controller: in its constructor.

final ScrollController _scrollController = new ScrollController();

Achieving full width and auto scroll.

new Column(
children: [
     new Expanded(
           new ListView.builder(builder:(BuildContext _context, int index){
               return //your list elements here.
             },
          controller: _scrollController,
          itemCount: count //total count of elements on list
         ),
       ),
      // your other widgets here.
   ]
)

for auto scroll

//your logic here
_scrollController.animateTo(double position, Duration duration, Curves curve);//refer to documentation