title: how to create horizontal and vertical scrollable widgets in flutter
body: <p>sample Layout image</p>
  
  <p><a href="https://i.stack.imgur.com/xUb2T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xUb2T.png" alt="enter image description here"></a></p>
  
  <p>I am trying to create attached layout. It has two containers.</p>
  
  <ul>
  <li>First is a fixed size box that scrolls horizontally.</li>
  <li>Second is a card that takes up remaining space with list view inside it.</li>
  </ul>
  
  <p>How can I achieve this layout ?</p>
  
  <p>As you can see, the scroll direction is different for both containers.</p>
  
  <p>The code is working till the Tags view (first box) but as soon as I am adding a second box i.e card, it is not showing anything and getting errors at console as below..</p>
  
  <pre><code>I/flutter ( 9412):   AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#85877 ink renderer] ←
  I/flutter ( 9412):   NotificationListener&lt;LayoutChangedNotification&gt; ← ⋯
  I/flutter ( 9412):   parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
  I/flutter ( 9412):   constraints: BoxConstraints(0.0&lt;=w&lt;=340.0, 0.0&lt;=h&lt;=Infinity)
  I/flutter ( 9412):   size: MISSING
  I/flutter ( 9412):   additionalConstraints: BoxConstraints(biggest)
  I/flutter ( 9412): This RenderObject had the following descendants (showing up to depth 5):
  I/flutter ( 9412):   RenderFlex#93e12 NEEDS-LAYOUT NEEDS-PAINT
  I/flutter ( 9412):     RenderRepaintBoundary#977a7 NEEDS-LAYOUT NEEDS-PAINT
  I/flutter ( 9412):       RenderCustomPaint#b6be8 NEEDS-LAYOUT NEEDS-PAINT
  I/flutter ( 9412):         RenderRepaintBoundary#e449b NEEDS-LAYOUT NEEDS-PAINT
  I/flutter ( 9412):           _RenderExcludableScrollSemantics#293fd NEEDS-LAYOUT NEEDS-PAINT
  
  
  
  class _KanbanState extends State&lt;Kanban&gt; {
    @override
    Widget build(BuildContext context) {
  
      Widget tagList = 
      new SizedBox(
        height: 100.0,
        child: 
      new Column(
        children: &lt;Widget&gt;[
          new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: &lt;Widget&gt;[
              new ActionChip(
                  backgroundColor: Colors.yellow,
                  label: new Text('Tag1'),
                  onPressed: () {
                    // update board with selection
                  }),
              new ActionChip(
                  //backgroundColor: Colors.transparent,
                  label: new Text('Tag2'),
                  onPressed: () {
                    // update board with selection
                  }),
              new ActionChip(
                  label: new Text('Tag3'),
                  onPressed: () {
                    // update board with selection
                  }),
              new ActionChip(
                  label: new Text('Tag4'),
                  onPressed: () {
                    // update board with selection
                  }),
            ],
          )
        ],
      ),);
  
      Widget boardView = new Flexible(
        // margin: new EdgeInsets.symmetric(vertical: 15.0),
        child: new Column(
          children: &lt;Widget&gt;[
            new ListView.builder(
              scrollDirection: Axis.vertical,
              itemCount: 5,
              itemBuilder: (BuildContext context, int index) {
                return new ListTile(
                  onTap: () {
                  },
                  title: new Row(
                    children: &lt;Widget&gt;[
                      new Expanded(child: new Text("This is item name")),
                      new Text("12 Dec 18"),
                    ],
                  ),
                );
              },
            ),
          ],
        ),
      );
  
      //  int _value=0;
      return new Container(
          child: new Scaffold(
            appBar: new AppBar(
              elevation: 1.0,
              title: new Text("Test title"),
            ),
            body: new Container(
                margin: new EdgeInsets.all(10.0),
                child: Column(
                  children: &lt;Widget&gt;[
                    tagList,
                    boardView,
                  ],
                )),
          ));
    }
  }
  </code></pre>