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

Question

I have added two card widgets in a row enclosed in a columnCode:
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

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

Answer 2

You should use listView widget.
ListView(
children: <Widget>[
ItemOne(),
ItemTwo(),
ItemThree(),
],
),
and to change the scroll physics use:
scrollDirection: Axis.horizontal,