Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Full height Container inside SingleChildScrollView

Tags:

flutter

I've a SingleChildScrollView and inside that a Container. What I want to achieve is that a Container's height should be a full viewport height.

My code:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: 'OpenSans',
      ),
      home: SingleChildScrollView(
        child: Container(
          color: Colors.white,
          height: double.infinity,
        ),
      ),
    );
  }
}

If I run my code, I've got an exception:

I/flutter ( 6293): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 6293): The following assertion was thrown during performLayout():
I/flutter ( 6293): BoxConstraints forces an infinite height.
I/flutter ( 6293): These invalid constraints were provided to RenderDecoratedBox's layout() function by the following
I/flutter ( 6293): function, which probably computed the invalid constraints in question:
I/flutter ( 6293):   RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:258:13)
I/flutter ( 6293): The offending constraints were:
I/flutter ( 6293):   BoxConstraints(w=411.4, h=Infinity)
like image 574
Runtime Terror Avatar asked Jan 27 '19 14:01

Runtime Terror


People also ask

Can I use expanded in SingleChildScrollView?

Way to use Expanded() inside ListView() or SingleChildScrollView() Instead of SingleChildScrollView or ListView ,wrap the widget with CustomScrollView like in the below image and you're able to use expanded() inside scrollable widgets.

When should I use SingleChildScrollView?

The SingleChildScrollView is quite useful when we have a single widget, which should be entirely visible. So we can vertically scroll down. The code is quite simple. Now, we can refactor our new column widget.

What is single child scroll view?

A box in which a single widget can be scrolled. This widget is useful when you have a single box that will normally be entirely visible, for example a clock face in a time picker, but you need to make sure it can be scrolled if the container gets too small in one axis (the scroll direction).


1 Answers

Perhaps

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final mq = MediaQueryData.fromWindow(window);
    return MaterialApp(
      title: 'MyApp',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: 'OpenSans',
      ),
      home: SingleChildScrollView(
        child: ConstrainedBox(
          constraints: BoxConstraints.tightFor(
            height: mq.size.height,
          ),
          child: Container(
            height: double.infinity,
            decoration: BoxDecoration(
                color: Colors.red,
                border: Border.all(color: Colors.blue, width: 8)),
          ),
        ),
      ),
    );
  }
}
like image 188
Günter Zöchbauer Avatar answered Oct 29 '22 14:10

Günter Zöchbauer