ListView ratios example - by Simon Lightfoot - Humpday Q&A :: 31st January 2024 #Flutter #Dart https://www.youtube.com/watch?v=YS_g2TJN-cQ

humpday_310124_1.dart

// MIT License
//
// Copyright (c) 2023 Simon Lightfoot
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
//
import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Home(),
  ));
}

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          if (index == 1) {
            // GOOD WAY
            return Padding(
              padding: const EdgeInsets.symmetric(vertical: 8.0),
              child: AspectRatio(
                aspectRatio: 3.5 / 1.5,
                child: ListView.builder(
                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
                  scrollDirection: Axis.horizontal,
                  clipBehavior: Clip.none,
                  itemBuilder: (BuildContext context, int index) {
                    return const AspectRatio(
                      aspectRatio: 1.0 / 1.5,
                      child: Placeholder(),
                    );
                  },
                ),
              ),
            );
          } else if (index == 2) {
            // BAD WAY
            return LayoutBuilder(
              builder: (BuildContext context, BoxConstraints constraints) {
                final childWidth = constraints.maxWidth / 3.5;
                return SizedBox(
                  height: 160.0,
                  child: ListView.builder(
                    padding: const EdgeInsets.symmetric(horizontal: 8.0),
                    scrollDirection: Axis.horizontal,
                    clipBehavior: Clip.none,
                    itemBuilder: (BuildContext context, int index) {
                      return SizedBox(
                        width: childWidth,
                        child: const Placeholder(),
                      );
                    },
                  ),
                );
              },
            );
          }
          return const Padding(
            padding: EdgeInsets.all(8.0),
            child: SizedBox(
              height: 200.0,
              child: Placeholder(),
            ),
          );
        },
      ),
    );
  }
}