How to put 2 listView in a Row?

user_12184173 0
Viewed 3687

I want to be able to put 2 ListView in a row so they are totally independant and I can add items dynamically to it. As if I had a Column for my score and next to it, a Column for the number of kill.

Does anyonw have an idea how to do it ?

I tried that :

Row(
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Container(
                      height: 200,
                      child: ListView(
                        children: <Widget>[
                          Text("Hey")
                        ],
                      ),
                    ),
                    VerticalDivider(),
                    Container(
                      height: 200,
                      child: ListView(
                          children: <Widget>[
                          Text("Hey")
                      ]),
                    ),
                  ],
                )

Here is my full class :

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class GamePage extends StatefulWidget {
  @override
  _GamePageState createState() => _GamePageState();
}

class _GamePageState extends State<GamePage>{
  @override
  Widget build(BuildContext context){
    return CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text("Jeu", style: TextStyle(fontSize: 20.0),),
        ),
        child: SafeArea(
          child: Container(
            padding: EdgeInsets.all(20),
            child: Column(
              children: <Widget>[
                CupertinoTextField(
                  placeholder: "Team 1",
                ),
                Container(padding: EdgeInsets.all(5.0),),
                Row(
                  children: <Widget>[
                    Expanded(child: Container(),),
                    Text("Annonces :", textAlign: TextAlign.center,),
                    Expanded(child: Container(),),
                    Text("Points réguliers :", textAlign: TextAlign.center,),
                    Expanded(child: Container(),),
                  ],
                ),
                Row(
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Container(
                      height: 200,
                      child: ListView(
                        children: <Widget>[
                          Text("Hey")
                        ],
                      ),
                    ),
                    VerticalDivider(),
                    Container(
                      height: 200,
                      child: ListView(
                          children: <Widget>[
                          Text("Hey")
                      ]),
                    ),
                  ],
                )
              ],
            ),
          ),
        )
    );
  }
}

Does someone has any solution ?

flutter-layout dart flutter
2 Answers

Screenshot:

enter image description here

Row(
  children: <Widget>[
    Flexible(
      child: Container(
        color: Colors.teal,
        child: ListView.builder(
          itemBuilder: (_, i) => ListTile(title: Text("List1: $i")),
        ),
      ),
    ),
    Flexible(
      child: Container(
        color: Colors.orange,
        child: ListView.builder(
          itemBuilder: (_, i) => ListTile(title: Text("List2: $i")),
        ),
      ),
    ),
  ],
)
user_66186220

In your column Wrap row into container like below code. That might help you maybe what you're looking for.

 Container(
        height: 200,
        child: Row(
          children: <Widget>[
            Expanded(
              child: ListView(
                children: <Widget>[
                  Container(
                    height: 200,
                    color: Colors.blue,
                  ),
                ],
              ),
            ),
            Expanded(
              child: ListView(
                children: <Widget>[
                  Container(
                    height: 200,
                    color: Colors.red,
                  ),
                ],
              ),
            ),
          ],
        ),
      )
user_105112660
Related