Flutter Tutorials

Flutter app development tutorials


flutter – ListView horizontal height

main.dart


import 'package:flutter/material.dart';

void main() => runApp(const FlutterExample());

class FlutterExample extends StatelessWidget {
  const FlutterExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Example',
        theme: ThemeData(primarySwatch: Colors.amber),
        home: const StateExample()
    );
  }
}

class StateExample extends StatefulWidget {
  const StateExample({Key? key}) : super(key: key);

  @override
  _StateExampleState createState() => _StateExampleState();
}

class _StateExampleState extends State<StateExample>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFEFEFA),
      appBar: AppBar(
          title: const Text("Flutter - ListView Horizontal Height")
      ),
      body: bodyContent(),
    );
  }

  bodyContent() {
    return Container(
        height: 100,
        margin: const EdgeInsets.symmetric(vertical: 20),
        child: ListView.builder(
          itemCount: 100,
          scrollDirection: Axis.horizontal,
          itemBuilder: (context, index) {
            return Container(
              child: Text(
                "${index + 1}",
                style: const TextStyle(
                  fontSize: 30,
                ),
              ),
              color: const Color(0xFFDA1884),
              margin: const EdgeInsets.symmetric(horizontal: 2.0),
              alignment: Alignment.center,
              width: 100,
            );
          },
        )
    );
  }
}

More flutter tutorials



About Me

Flutter Developer

Design a site like this with WordPress.com
Get started