Why this produces `blank white` a flutter bug?, all the complete code is included

Question

Why this produces blank white? I need the scrolling window to scroll underneath a widget that stays still. All the complete code is included below. Every widget nested by each of their ancestors (example inheritance image is provided below). I noticed if you directly use elder child widget by bypassing parent widget, then it works well. But I need to use it as follows (all the widgets needs to be used including the parent).

Grand Parent widget

import 'package:app3/screens/Parent.dart';
import 'package:flutter/material.dart';

int currentIndex1 = 0;

class GrandParent extends StatefulWidget {
  const GrandParent({Key? key}) : super(key: key);

  @override
  _GrandParentState createState() => _GrandParentState();
}

class _GrandParentState extends State<GrandParent>
    with SingleTickerProviderStateMixin {
  final pages = [
    Parent(),
  ];

  late TabController _tabbarcontroller;
  int _currentIndexNavBar = 0;

  @override
  void initState() {
    super.initState();
    _tabbarcontroller = new TabController(length: pages.length, vsync: this);
  }

  @override
  void dispose() {
    _tabbarcontroller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        // child: (pages[currentIndex1]),
        child: new TabBarView(
          controller: _tabbarcontroller,
          children: pages.toList(),
        ),
      ),
      bottomNavigationBar: new BottomNavigationBar(
        currentIndex: _currentIndexNavBar,
        onTap: (value) {
          setState(() {
            _tabbarcontroller.index = value;
            _currentIndexNavBar = value;
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Parent',
              backgroundColor: Colors.blue),
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Parent',
              backgroundColor: Colors.blue),
        ],
      ),
    );
  }
}

Parent widget

    import 'package:app3/widgets/Posts/SeenByOthers/PostBody/ElderChild.dart';
    import 'package:flutter/material.dart';
    
    class Parent extends StatefulWidget {
      const Parent({Key? key}) : super(key: key);
    
      @override
      _ParentState createState() => _ParentState();
    }
    
    class _ParentState extends State<Parent> {
      @override
      Widget build(BuildContext context) {
   
        return Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
 Container(
        width: 100,
        height: 2500,
        color: Colors.green,
        child: Text('Main bar'),
      ),
      ElderChild(),
            ]);
      }
    }

Elder Child widget

import 'package:app3/widgets/Posts/SeenByOthers/PostBody/YoungerChild.dart';
        import 'package:flutter/material.dart';
        
        class ElderChild extends StatefulWidget {
          const ElderChild({Key? key}) : super(key: key);
        
          @override
          _ElderChildState createState() => _ElderChildState();
        }
        
        class _ElderChildState extends State<ElderChild> {
          @override
          Widget build(BuildContext context) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(
                  width: 100,
                  color: Colors.red,
                  child: Padding(
                    padding: EdgeInsets.all(5),
                    child: Text('Elder bar'),
                  ),
                ),
                Expanded(
                    child: SingleChildScrollView(
                        child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                      Padding(padding: EdgeInsets.all(15), child: YoungerChild())
                    ])))
              ],
            );
          }
        }

Younger child widget

import 'package:flutter/material.dart';

class YoungerChild extends StatefulWidget {
  const YoungerChild({Key? key}) : super(key: key);

  @override
  _YoungerChildState createState() => _YoungerChildState();
}

class _YoungerChildState extends State<YoungerChild> {
  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            width: 100,
            height: 2500,
            color: Colors.amber,
child: Text('This is a scroll view, This is a scroll view'),
          )
        ]);
  }
}

score 0 · Answer 1 · answered Dec 09 '21 at 15:53

If you use Column inside Column one after another then it will throw error of unbounded height to get rid of this error try using Column inside a widget that have bounded height or some times mainAxisSize property may also help you

     Column(
            mainAxisSize: MainAxisSize.min,
            children: []
      )

Why this produces `blank white` a flutter bug?, all the complete code is included

1 Answers1