'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