'Flutter error viewport expand in the scrolling direction error. How to fix?
'Viewports expand in the scrolling direction to fill their container. ' 'In this case, a horizontal viewport was given an unlimited amount of ' 'horizontal space in which to expand. This situation typically happens ' 'when a scrollable widget is nested inside another scrollable widget.',
I'm getting this error, and I need help fixing it. I know that there are a million variations of this question that have been answered, but in the given solutions, I haven't been able to fix this code. Any ideas what the problem is?
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:raptor_front_end/raptor_theme.dart';
class CoachingMentoringHome extends StatefulWidget {
CoachingMentoringHome({Key? key}) : super(key: key);
@override
State<CoachingMentoringHome> createState() => _CoachingMentoringHomeState();
}
class _CoachingMentoringHomeState extends State<CoachingMentoringHome> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 1000,
centerTitle: true,
title: Text(
'Coaching & Mentoring',
style: RaptorTheme.lightTextTheme.headline2,
),
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () => Navigator.pop(context),
),
),
body: Column(
children: [
buildTopNavigator(),
buildBottomNavigator(),
],
),
);
}
Widget buildTopNavigator() => Flexible(
flex: 1,
child: Image.asset('assets/images/coaching.jpeg'),
);
Widget buildBottomNavigator() => Row(
mainAxisSize: MainAxisSize.max,
children: [
Container(
decoration: BoxDecoration(
color: RaptorTheme.cyanProcess,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20)
),
),
),
Text(
'Coaching & Mentoring Topics',
style: RaptorTheme.lightTextTheme.headline3,
),
Padding(
padding: EdgeInsets.all(30),
child: SizedBox(
height: 20,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
CoachingMentoringCard(
'Conflict \n Management',
'assets/images/conflict_resolution.jpeg'
),
CoachingMentoringCard(
'Leadership',
'assets/images/leadership.jpeg'),
CoachingMentoringCard(
'Emotional\n Intelligence',
'assets/images/emotional_intelligence2.jpeg'
),
CoachingMentoringCard(
'Career Growth',
'assets/images/career_growth.jpeg'
),
CoachingMentoringCard(
'Programming',
'assets/images/programming.jpeg'
),
CoachingMentoringCard(
'Quality of Life',
'assets/images/quality_of_life.jpeg'
),
],
addAutomaticKeepAlives: true,
),
),
),
],
);
}
class CoachingMentoringCard extends StatelessWidget {
String _card_label;
String _image_on_card;
CoachingMentoringCard(this._card_label, this._image_on_card);
@override
Widget build(BuildContext context) => Padding(
padding: EdgeInsets.all(5),
child: InkWell(
onTap: () {},
child: Card(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Stack(
alignment: AlignmentDirectional.topCenter,
children: [
Image.asset(
_image_on_card,
fit: BoxFit.cover,
width: 300,
height: 300,
),
Padding(
padding: EdgeInsets.all(6),
child: Text(
_card_label,
textAlign: TextAlign.center,
style: RaptorTheme.lightTextTheme.headline6,
),
),
],
),
),
),
);
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
