How To Create Horizontal List View With Example In Flutter

admin_img Posted By Bajarangi soft , Posted On 22-09-2020

I want to create a list of cards scrolling horizontally with snap to fit effect when swiped either from right.

Horizontal List Scroll view in Flutter

Create Horizontal ListView in Flutter

The only difference is in the way you config the list through scrollingDirection property, which can be either Axis.vertical or Axis.horizontal

Horizontal Listview code
main.dart
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  debugShowCheckedModeBanner: false,
  home: MainScreen(),
));

class MainScreen extends StatelessWidget {
  final List<int> numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Horizontal List Scroll View'),
        backgroundColor: Colors.black,
      ),
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 30.0),
        height: MediaQuery.of(context).size.height * 0.45,
        child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: numbers.length, itemBuilder: (context, index) {
          return Container(
            width: MediaQuery.of(context).size.width * 0.6,
            child: Card(
              color: Colors.orange,
              child: Container(
                child: Center(child:
                   Text(numbers[index].toString(),
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 36.0
                    ),
                )),
              ),
            ),
          );
        }),
      ),
    );
  }
}

Related Post