TL;DR

How can I know the layout rules of a widget (what size will it request from its parent and what constraints will it pass to its children) if there is no documentation about it?

The problem details

I have this very basic app

void main() {
  runApp(
    Container(
        color: Colors.red,
        width: 20,
        height: 20,
      ),
  );
}

I was expecting the Container to have width and height of 20 but I got a Container that filled up the whole screen.

Reading this article on flutter.dev about understanding constraints, in its last part called "Learning the layout rules for specific widgets ", they mention how to do this by finding the createRenderObject method and then finding the performLayout method.

However this createRenderObject method is only available for subclasses of RenderObjectWidget. For example, navigating through code of Transform widget, I find createRenderObject that returns a RenderTransform, that extends RenderProxyBox, which finally implements performLayout as :

  @override
  void performLayout() {
    if (child != null) {
      child!.layout(constraints, parentUsesSize: true);
      size = child!.size;
    } else {
      size = computeSizeForNoChild(constraints);
    }
  }

I can conclude that Transform widget will finally take the size of its child due to this line size = child!.size;.

But in case of Container above, is directly extends StatelessWidget. I couldn't find by navigating through its code the methods performLayout and createRenderObject, I could only find createElement, but I am looking for the RenderObject in the render tree associated with the Container and not the element.

The Question

So the question is how to find this render object associated with a stateless widget/stateful widget in order to know the layout rules that this widget will give to its children and will follow them itself in this case?

CodePudding user response：

You are missing the architecture here, we need to use Scaffold. like

void main() {
  runApp(
    MaterialApp(
        home: Scaffold(
      body: Container(
        color: Colors.red,
        width: 20,
        height: 20,
      ),
    )),
  );
}

CodePudding user response：

Meh, don't get too complex yet. here is simplest thing i can explain to you, lets separate an application into 4 different layer.

1. Application -> You can use MaterialApp to create an material application
2. Widget Pages -> You can choose between using Stateless or StatefulWidget, it depends on your need. If you need dynamic, with a a lot of changing states you can use StatefulWidget or you can create a static page with StatelessWidget.
3. Scaffold -> Widget pages must return a scaffold in order to form an material pages, here you can use Scaffold, you can add appBar, fab, body, bottomNavigationBar & etc.
4. Widgets -> Here the widgets can be anything, it's can be an appBar for your scaffold appBar, or ListView, GridView or Custom widget.

So your code must be look like this, kind of

/// This block is the first point of your application, this will run your application
void main() {
  runApp(myApp());
}

/// Then you need an material app, this part should return your app
class MyApp extends StatelessWidget{

  /// This is very important, both StatelessWidget / StatefullWidget 
  /// always having a build method. It's should returning a Widget. But in this case we will return an material application
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: MyHome(),
    ),
  }
}

class MyHome extends StatelessWidget{

  /// This is home page, it's have Scaffold so the page will using, material guidelines. 
  @override
  Widget build(BuildContext context){
    return Scaffold(
       body:Container(
         color: Colors.red,
         width: 20,
         height: 20,
       ),
    );
  }
}