How to use scrollview under column in flutter?

Question

As I am coding an app and I want to make an appbar and bottom navigation bar non- scrollable but when I used a scrollview I am getting the error. See the code:

import 'package:CovidTraces/CustomGridview.dart';
import 'package:CovidTraces/customnavbar.dart';
import 'package:flutter/material.dart';
import 'customappbar.dart';


class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            CustomAppBar(),
            SingleChildScrollView(
              child: Column(
                children: [
                  MyCustomGridview(),
                ],
              ),
            ),
          ],
        ),
        bottomNavigationBar: MyCustomNavBar(),
      ),
    );
  }
}

This is giving me error as

 SingleChildScrollView 
lib\home.dart:14
════════════════════════════════════════════════════════════════════════════════
Another exception was thrown: RenderBox was not laid out: RenderCustomPaint#834e2 relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderCustomPaint#834e2 relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1702 pos 12: 'hasSize'
The relevant error-causing widget was
    SingleChildScrollView 
lib\home.dart:14
════════════════════════════════════════════════════════════════════════════════
Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#faba4 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderRepaintBoundary#faba4 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1702 pos 12: 'hasSize'
The relevant error-causing widget was
    Column 
lib\home.dart:11
════════════════════════════════════════════════════════════════════════════════
Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#faba4 relayoutBoundary=up2 NEEDS-PAINT

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderRepaintBoundary#faba4 relayoutBoundary=up2 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1702 pos 12: 'hasSize'
The relevant error-causing widget was
    Column

...and many more like this Can you identify this and help me to use the gridview into scrollview.

Here is custom app bar

import 'package:CovidTraces/CustomGridview.dart';
import 'package:flutter/material.dart';
import 'constraints.dart';

Constraints color = new Constraints();

class CustomAppBar extends StatelessWidget {
  Widget IconsContainer(String imgsrc, String message) {
    return InkWell(
      onTap: () {
        print('$message');
      },
      child: Container(
        height: 55.0,
        width: 70.0,
        decoration: new BoxDecoration(
          color: color.primary,
          shape: BoxShape.circle,
        ),
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Image.asset(
            '$imgsrc',
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              IconsContainer('assets/images/menu.png', 'menu clicked...'),
              Spacer(),
              Text(
                'CoVID TRACES',
                style: TextStyle(
                  color: color.writingHead,
                  fontSize: 25.0,
                  fontFamily: 'Poppins',
                  fontWeight: FontWeight.bold,
                ),
              ),
              Spacer(),
              IconsContainer('assets/images/refresh.png', 'refreshing...'),
            ],
          ),
        ),
        SingleChildScrollView(
          child: Column(
            children: [
              Stack(
                overflow: Overflow.visible,
                children: [
                  CustomPaint(
                    painter: MyCustomPainter(),
                    child: ClipPath(
                      clipper: MyCustomClip(),
                      child: Container(
                        decoration: new BoxDecoration(
                          gradient: new LinearGradient(
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                            colors: [
                              color.custombarG1,
                              color.custombarG2,
                            ],
                          ),
                        ),
                        height: height / 2 - 50,
                        width: width,
                      ),
                    ),
                  ),
                  Positioned(
                    left: -40.0,
                    top: 10.0,
                    child: Image.asset(
                      'assets/images/covid3.png',
                      height: 310.0,
                    ),
                  ),
                  Align(
                    alignment: Alignment.topRight,
                    child: Padding(
                      padding: const EdgeInsets.only(top: 20.0, right: 2.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          Text(
                            'CoVID-19',
                            style: TextStyle(
                              color: color.writingTitle,
                              fontSize: 40.0,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(3.0),
                            child: Text(
                              'TRACKER',
                              style: TextStyle(
                                color: color.primary,
                                fontSize: 30.0,
                                fontStyle: FontStyle.italic,
                                fontWeight: FontWeight.bold,
                                height: 1.2,
                              ),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(right: 40),
                            child: Text(
                              '+',
                              style: TextStyle(
                                color: color.writingHead,
                                fontSize: 35.0,
                                height: 0.75,
                              ),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(right: 12.0),
                            child: Text(
                              'CASES',
                              style: TextStyle(
                                color: color.writingTitle,
                                fontSize: 30.0,
                                fontStyle: FontStyle.italic,
                              ),
                            ),
                          ),
                          Text(
                            'IN SECONDS',
                            style: TextStyle(
                              color: color.writingSubHead,
                              fontSize: 35.0,
                              fontWeight: FontWeight.bold,
                              fontFamily: 'Poppins',
                              height: 1.5,
                            ),
                          ),
                          Text(
                            'WorldWide',
                            style: TextStyle(
                              color: color.writingTitle,
                              fontSize: 30.0,
                              fontWeight: FontWeight.bold,
                              fontFamily: 'Poppins',
                              height: 3.5,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
              Container(
                height: 200,
                child: GridView.count(
                  scrollDirection: Axis.vertical,
                  crossAxisCount: 2,
                  children: List.generate(50, (index) {
                    return Container(
                      // color: color.primary,
                      child: Card(
                        color: color.primary,
                      ),
                    );
                  }),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

class MyCustomClip extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = new Path();
    path.lineTo(0.0, size.height - 80);
    var firstCPoint = new Offset((size.width / 4) - 20, (size.height) / 2 - 50);
    var firstEPoint = new Offset((size.width / 2 + 30), size.height - 70);
    path.quadraticBezierTo(
        firstCPoint.dx, firstCPoint.dy, firstEPoint.dx, firstEPoint.dy);
    var secondCPoint = new Offset(size.width * 0.9, size.height + 60);
    var secondEPoint = new Offset(size.width, size.height / 2 + 50);
    path.quadraticBezierTo(
        secondCPoint.dx, secondCPoint.dy, secondEPoint.dx, secondEPoint.dy);

    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Path path = new Path();
    path.lineTo(0.0, size.height - 80);
    var firstCPoint = new Offset((size.width / 4) - 20, (size.height) / 2 - 50);
    var firstEPoint = new Offset((size.width / 2 + 30), size.height - 70);
    path.quadraticBezierTo(
        firstCPoint.dx, firstCPoint.dy, firstEPoint.dx, firstEPoint.dy);
    var secondCPoint = new Offset(size.width * 0.9, size.height + 60);
    var secondEPoint = new Offset(size.width, size.height / 2 + 50);
    path.quadraticBezierTo(
        secondCPoint.dx, secondCPoint.dy, secondEPoint.dx, secondEPoint.dy);

    path.lineTo(size.width, 0.0);
    path.close();
    canvas.drawShadow(path, color.custombarG2, 30.0, false);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Here is custom nav bar

import 'package:CovidTraces/customappbar.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';

class MyCustomNavBar extends StatefulWidget {
  @override
  _MyCustomNavBarState createState() => _MyCustomNavBarState();
}

class _MyCustomNavBarState extends State<MyCustomNavBar> {
  @override
  Widget build(BuildContext context) {
    return CurvedNavigationBar(
      height: 50.0,
      index: 2,
      color: color.primary,
      animationCurve: Curves.easeInCubic,
      backgroundColor: Colors.transparent,
      animationDuration: new Duration(
        milliseconds: 200,
      ),
      items: [
        Image.asset(
          'assets/images/add.png',
          height: 30.0,
          width: 30.0,
        ),
        Image.asset(
          'assets/images/about.png',
          height: 30.0,
          width: 30.0,
        ),
        Image.asset(
          'assets/images/home.png',
          height: 30.0,
          width: 30.0,
        ),
        Image.asset(
          'assets/images/contact.png',
          height: 30.0,
          width: 30.0,
        ),
        Image.asset(
          'assets/images/chat.png',
          height: 30.0,
          width: 30.0,
        ),
      ],
    );
  }
}

Amon C · Answer 1 · 2020-09-04T10:36:56.610

0

body: SingleChildScrollView(

  child: Column(
    children: [
      Container(
        height: MediaQuery.of(context).size.height-200,
        child: GridView.count(
          crossAxisCount: 2,
          children: [
            Container(
              height: 5,
              width: 5,
              color: Colors.red,
            ),
            Container(
              height: 5,
              width: 5,
              color: Colors.blue,
            ),
          ],
        ),
      ),
    ],
  ),
)

edited Sep 04 '20 at 10:36

answered Sep 03 '20 at 18:26

Amon C

1,710
9
17

How did you used .preferredSize there? I am not able to use it. Please give me directions – Shîvam Yadav Sep 04 '20 at 05:21
` Column( children: [ GridView.count( crossAxisCount: 2, children: [ Container( height: 5, width: 5, color: color.primary, ), Container( height: 5, width: 5, color: color.primary, ), ], ), ], ); } } ` – Shîvam Yadav Sep 04 '20 at 05:39
I'm getting an error whenever I used to call this girdview in my main function. Also please tell me how can I use preferredSize.height – Shîvam Yadav Sep 04 '20 at 05:40
Check the new code. I need to see the custom app bar and Bottom nabber codes to get preferredSize.height – Amon C Sep 04 '20 at 08:22
I have editted and included custom navbar and appbar. Please guide me – Shîvam Yadav Sep 04 '20 at 10:19
Answer please, so that I can approve your answer – Shîvam Yadav Sep 04 '20 at 17:01
Ok. I already told you need to specify a height. Check the new code. But you need to call preferred height for now. – Amon C Sep 04 '20 at 17:21

How to use scrollview under column in flutter?

1 Answers1