'RenderBox was not laid out' error even after using Expanded

Question

I have added two card widgets in a row enclosed in a column
Code:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Padding(
              padding: EdgeInsets.fromLTRB(0.0, 10, 0.0, 0.0),
              child: Row(
                children: [
                  Expanded(
                    child: SizedBox(
                      height: 70,
                      child: Card(
                        color: Colors.orange[500],
                        child: ListTile(
                          leading: CircleAvatar(
                            backgroundImage:
                                AssetImage('assets/card_photo.png'),
                          ),
                          title: Text(
                            'Teacher of the month',
                            style: TextStyle(
                                fontSize: 10,
                                fontWeight: FontWeight.bold,
                                fontFamily: 'Poppins-Bold'),
                          ),
                          subtitle: Text(
                            'MAY 2020',
                            style: TextStyle(
                                fontSize: 8,
                                fontWeight: FontWeight.bold,
                                color: Colors.white,
                                fontFamily: 'Poppins-Bold'),
                          ),
                          onTap: () {},
                        ),
                      ),
                    ),
                  ),
                  Expanded(
                    child: SizedBox(
                      height: 70,
                      child: Card(
                        color: Colors.orange[500],
                        child: ListTile(
                          leading: CircleAvatar(
                            backgroundImage:
                                AssetImage('assets/card_photo.png'),
                          ),
                          title: Text(
                            'Teacher of the month',
                            style: TextStyle(
                                fontSize: 10,
                                fontWeight: FontWeight.bold,
                                fontFamily: 'Poppins-Bold'),
                          ),
                          subtitle: Text(
                            'CLASS NAME',
                            style: TextStyle(
                                fontSize: 8,
                                fontWeight: FontWeight.bold,
                                color: Colors.white,
                                fontFamily: 'Poppins-Bold'),
                          ),
                          onTap: () {},
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This is the output:
Output Image
However I want this row to be scrollabe widgets of cards. But even after using expanded, I am getting 'RenderBox was not laid out' error.
Here is the code for it:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Padding(
              padding: EdgeInsets.fromLTRB(0.0, 10, 0.0, 0.0),
              child: SingleChildScrollView(//added scrollview widget
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: [
                    Expanded(
                      child: SizedBox(
                        height: 70,
                        child: Card(
                          color: Colors.orange[500],
                          child: ListTile(
                            leading: CircleAvatar(
                              backgroundImage:
                                  AssetImage('assets/card_photo.png'),
                            ),
                            title: Text(
                              'Teacher of the month',
                              style: TextStyle(
                                  fontSize: 10,
                                  fontWeight: FontWeight.bold,
                                  fontFamily: 'Poppins-Bold'),
                            ),
                            subtitle: Text(
                              'MAY 2020',
                              style: TextStyle(
                                  fontSize: 8,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.white,
                                  fontFamily: 'Poppins-Bold'),
                            ),
                            onTap: () {},
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      child: SizedBox(
                        height: 70,
                        child: Card(
                          color: Colors.orange[500],
                          child: ListTile(
                            leading: CircleAvatar(
                              backgroundImage:
                                  AssetImage('assets/card_photo.png'),
                            ),
                            title: Text(
                              'Teacher of the month',
                              style: TextStyle(
                                  fontSize: 10,
                                  fontWeight: FontWeight.bold,
                                  fontFamily: 'Poppins-Bold'),
                            ),
                            subtitle: Text(
                              'CLASS NAME',
                              style: TextStyle(
                                  fontSize: 8,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.white,
                                  fontFamily: 'Poppins-Bold'),
                            ),
                            onTap: () {},
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Edit: I also want text below the icon. If someone could help me with that also. Sample image name icon

Answer 1

You should use listView widget.

ListView(
  children: <Widget>[
    ItemOne(),
    ItemTwo(),
    ItemThree(),
  ],
),

and to change the scroll physics use:

scrollDirection: Axis.horizontal,

Answer 2

Check if this works

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

class something extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appBar = AppBar();
    return Container(
      height: MediaQuery.of(context).size.height / 3,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 6,  
        itemExtent: MediaQuery.of(context).size.height / 3,
        itemBuilder: (context, index) {
          return _cards(context, appBar);
        },
      ),
    );
  }
}

Widget _cards(BuildContext context, AppBar appBar) {
  return Align(
    child: Container(
      height: 100,
      child: Card(
        semanticContainer: true,
        clipBehavior: Clip.antiAliasWithSaveLayer,
        elevation: 5,
        margin: EdgeInsets.all(10),
        color: Colors.orange[500],
        child: ListTile(
          leading: Column(
            children: [
              CircleAvatar(
                backgroundImage: NetworkImage(
                    'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
              ),
              Text("Name"),
            ],
          ),
          title: Text('Teacher of the month', style: _textStyle(10)),
          subtitle: Text('MAY 2020', style: _textStyle(8)),
          onTap: () {},
        ),
      ),
    ),
  );
}

_textStyle(double size) {
  return TextStyle(
      fontSize: size,
      fontWeight: FontWeight.bold,
      color: Colors.white,
      fontFamily: 'Poppins-Bold');
}

It gives me output like this