Coding Flutter List View
Flutter:: Horizontal List View
November 21, 2019
0
,

lib/main.dart


import 'package:flutter/material.dart';


void main() {
  runApp(MyHorizontalSample1());
}

class MyHorizontalSample1 extends StatelessWidget{
  
  Container MyArticles(String imageVal, String heading, String subHeading){

    return Container(
                width: 160.0,
                child: Card(
                  child: Wrap(
                    children: [
                      Image.asset(
                      'images/pavlova.jpg'
                      ),
                      ListTile(
                        title: Text(heading),
                        subtitle: Text(subHeading),
                      ),
                    ],
                  ),
                ),
              );
  }
  
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Horizontal List View',
      theme: ThemeData(
        primaryColor: new Color(0xff622F74),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'Flutter Horizontal List View'
            ),
        ),
        body: Container(
          margin: EdgeInsets.symmetric(vertical: 20.0),
          height: 180,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: [
              /*
              Container(
                width: 160.0,
                child: Card(
                  child: Wrap(
                    children: [
                      Image.asset(
                      'images/pavlova.jpg'
                      ),
                      ListTile(
                        title: Text('Heading 1'),
                        subtitle: Text('Sub Heading 1'),
                      ),
                    ],
                  ),
                ),
              )
              */
              MyArticles('images/pavlova.jpg', 'Dhaka', 'Lorem Ipsum'),
              MyArticles('images/pavlova.jpg', 'Khulna', 'Lorem Ipsum'),
              MyArticles('images/pavlova.jpg', 'Barisal', 'Lorem Ipsum'),
              MyArticles('images/pavlova.jpg', 'Rangpur', 'Lorem Ipsum'),
              MyArticles('images/pavlova.jpg', 'Chittahong', 'Lorem Ipsum'),
              MyArticles('images/pavlova.jpg', 'Mymensingh', 'Lorem Ipsum'),
              MyArticles('images/pavlova.jpg', 'City 7', 'Lorem Ipsum'),
            ],
          ),
        ),
      ),
    );
  }
}

pubspec.yaml

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
    - images/pavlova.jpg

Reference:
https://www.youtube.com/watch?v=6C5qvdUEfNc

About author

ZERIN

CEO & Founder (BdBooking.com - Online Hotel Booking System), CEO & Founder (TaskGum.com - Task Managment Software), CEO & Founder (InnKeyPro.com - Hotel ERP), Software Engineer & Solution Architect

How do i install older version of CI4 using composer

Sometimes when you run git update & composer u...

Read more

hitpath API: Read Affiliates Record

<?php $offset = 0; $limit = 10; $url = "http://...

Read more

hitpath API: Read Campaigns Record

<?php $offset = 0; $limit = 10; $url = "http://...

Read more

There are 0 comments

Leave a Reply

Your email address will not be published. Required fields are marked *