CODEWITHSUNDEEP
flutterflutter-layout
Sujal Shrestha
Sujal Shrestha

Reputation: 41

how to creare Horizontal list in flutter

I am trying to develop a horizontal list view in flutter. when ever I type scrollDirection: Axis.horizontal, and re run the program I have issues saying. I tried rapping the whole with listview but also its not working enter image description here enter image description here

body: Container(
child:ListView.builder(                  
      itemCount: _list.length,
       itemExtent: 200.0,
      itemBuilder: (context, i) {
        final b = _list[i];

        return new ListTile(
            title: new Card(
              elevation: 1.0,
              child: new Container(
                height: 293,
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.all(Radius.circular(10.0)),
                    boxShadow: [
                      BoxShadow(
                          blurRadius: 6,
                          color: Colors.black,
                          offset: Offset(4, 4))
                    ]),
                padding: EdgeInsets.all(1.0),
                child: 
                Column(
                  children: <Widget>[
                    SizedBox(height: 4),
                    Padding(
                      child: Image.network(b.bikeimage),
                      padding: EdgeInsets.only(bottom: 0.0),
                    ),
                    Padding(
                      child: Text(
                        b.name,
                        textAlign: TextAlign.right,
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 20,
                            color: Colors.black), ),
                      padding: EdgeInsets.only(left: 10),
                    ),
                  ],
                ),
              ),
            ),
            onTap: () {
            });
      },
    ),

)

Upvotes: 0

Views: 467

Answers (4)

M Karimi
M Karimi

Reputation: 3485

you can use below class for building listview in horizontal or vertical mode:

import 'package:flutter/material.dart';
class HorizontalListView extends StatefulWidget {

HorizontalListView({this.items, this.horizontal, this.width, this.height});

final List<Widget> items;
final bool horizontal;

final double width;
final double height;

@override
  _HorizontalListState createState() {
    // TODO: implement createState
    return _HorizontalListState();
  }
}

class _HorizontalListState extends State<HorizontalListView> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
        margin: EdgeInsets.symmetric(vertical: 20.0),
        height: widget.height > 0 ? widget.height : 200.0,
        child: ListView(
          scrollDirection: widget.horizontal ? Axis.horizontal : Axis.vertical,
          children: widget.items,
        ));
  }

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

Upvotes: 0

timilehinjegede
timilehinjegede

Reputation: 14033

You got the error because your Container wasn't given a specified width and height.

The code below would work perfectly, Check it out,

body: Container(
      // give your container any desired height
       height: 500,
       // give your container any desired width
       width: double.infinity,
       child: ListView.builder(    

       // set the scroll direction to horizontal for a horizontal list
       scrollDirection: Axis.horizontal,              
      ...
      // the rest of your listview.builder code here
      ...
       ),
     );

Hope this helps.

Upvotes: 1

Ajay Vaidhyanathan
Ajay Vaidhyanathan

Reputation: 43

You havent mentioned scrollaxisdirection in your code add that and try. For further refer https://pusher.com/tutorials/flutter-listviews

Upvotes: 0

Gerry
Gerry

Reputation: 1479

It looks like your container has no height or width constraints so it can't be drawn.

Upvotes: 0

Related Questions