ListView horizontal

readme.md

ListView horizontal

Created with <3 with dartpad.dev.

main.dart

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: MyCustomScrollBehavior(),
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(children: [
        Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height / 10,
          color: Colors.green[100],
          child: Center(
            child: Text(
              "Horizontal",
              style: Theme.of(context).textTheme.displaySmall,
            ),
          ),
        ),
        Container(
          width: MediaQuery.of(context).size.width,
          height: 150,
          color: Colors.greenAccent.shade100,
          child: ListView.builder(
            physics: const BouncingScrollPhysics(),
            scrollDirection: Axis.horizontal,
            itemCount: cartaz.length,
            itemBuilder: (context, index) {
              final item = cartaz[index];
              return Row(children: [
                SizedBox(width: (index == 0) ? 8 : 0),
                Cartaz(
                  name: item['name'],
                  urlImage: item['urlImage'],
                ),
                const SizedBox(width: 8),
              ]);
            },
          ),
        ),
      ]),
    );
  }
}

class Cartaz extends StatelessWidget {
  final String name;
  final String urlImage;

  const Cartaz({required this.name, required this.urlImage});

  @override
  build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          name
              .split(' ')
              .map((text) => text[0] + text.substring(1).toLowerCase())
              .join(' '),
          style: Theme.of(context).textTheme.bodySmall,
        ),
        const SizedBox(height: 5, width: 5),
        Container(
          height: 80,
          width: 80,
          padding: const EdgeInsets.all(3),
          decoration: BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.circular(20),
          ),
          child: CircleAvatar(
            child: ClipRRect(
              borderRadius: BorderRadius.circular(25),
              child: Image.network(
                urlImage,
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ],
    );
  }
}

List<Map<String, dynamic>> cartaz = [
  {
    'name': "BUZZ LIGHTYER",
    'urlImage': "https://imgs.casasbahia.com.br/1554952766/1xg.jpg?imwidth=64",
  },
  {
    'name': "JEFFERSON",
    'urlImage':
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzISruXhxa6NE3p1Zg_8kDbkr_9fiEd58rpg&usqp=CAU",
  },
  {
    'name': "ALIENIGENAS",
    'urlImage':
        "https://carrefourbr.vtexassets.com/arquivos/ids/16595637-540-auto?v=637552324087870000&width=540&height=auto&aspect=true",
  },
  {
    'name': "BUZZ LIGHTYER",
    'urlImage':
        "https://th.bing.com/th/id/R.0e7e624e9b652c305b79b3015eb5ca61?rik=IAF1ehjXYJOQrw&pid=ImgRaw&r=0",
  },
  {
    'name': "REX",
    'urlImage':
        "https://th.bing.com/th/id/OIP.QCGvhg5-1YcwsrCLDhIMjQHaFj?w=267&h=200&c=7&r=0&o=5&pid=1.7",
  },
  {
    'name': "Burro",
    'urlImage':
        "https://th.bing.com/th/id/OIP.joMQXaprqipn9Ti-EnZMLAHaFj?w=213&h=182&c=7&r=0&o=5&pid=1.7",
  },
  {
    'name': "DOLL",
    'urlImage':
        "https://th.bing.com/th?q=Toy+Story+Doll&w=120&h=120&c=1&rs=1&qlt=90&cb=1&pid=InlineBlock&mkt=pt-BR&cc=BR&setlang=pt-br&adlt=moderate&t=1&mw=247",
  },
];