Flutter Scrollable ListView for a Row Implementation

Question

I'm trying to make a listView in my top row and not sure the best approach. I was attempting to Refractor my first Row Widget into a ListView and having the first two containers as its children. New to flutter and don't know the best way to approach creating this listView. End goal is to add more containers to the row and make it scrollable in the horizontal direction.

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[900],
      body: Padding(
        padding: const EdgeInsets.all(32.0),
        child: Column(
          children: <Widget>[
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: Container(
                        margin: const EdgeInsets.all(10.0),
                        decoration: BoxDecoration(
                          color: Colors.grey,
                          borderRadius: BorderRadius.circular(15),
                        )),
                  ),
                  Expanded(
                    child: Container(
                      margin: const EdgeInsets.all(8.0),
                      decoration: BoxDecoration(
                        color: Colors.grey,
                        borderRadius: BorderRadius.circular(12),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: Container(
                      margin: const EdgeInsets.all(8.0),
                      decoration: BoxDecoration(
                        color: Colors.grey,
                        borderRadius: BorderRadius.circular(12),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: Container(
                      margin: const EdgeInsets.all(8.0),
                      decoration: BoxDecoration(
                        color: Colors.grey,
                        borderRadius: BorderRadius.circular(12),
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      margin: const EdgeInsets.all(8.0),
                      decoration: BoxDecoration(
                        color: Colors.grey,
                        borderRadius: BorderRadius.circular(12),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

score 0 · Answer 1 · answered Oct 08 '22 at 16:11

Just create a ListView() widget and set its scrollDirection. By default the scroll is vertical so you would need to set it to horizontal if you want a horizontal scroll.

ListView(
   scrollDirection: Axis.horizontal,
   children: <Widget>[
      Expanded(
         child: Container(
            margin: const EdgeInsets.all(10.0),
            decoration: BoxDecoration(
               color: Colors.grey,
               borderRadius: BorderRadius.circular(15),
            ),
         ),
      ),
      Expanded(
         child: Container(
            margin: const EdgeInsets.all(8.0),
            decoration: BoxDecoration(
               color: Colors.grey,
               borderRadius: BorderRadius.circular(12),
            ),
         ),
      ),
   ],
),

for more information about ListView(): flutter docs

Flutter Scrollable ListView for a Row Implementation

1 Answers1