I want to make a screen that has 2 columns beside eachother. Both columns are going to have a dynamic listview.builder and a textinput so I can put in new values and show them in those listviews. It is for a dart game calculator that I can track what I threw before. When I use the code underneath with body: Column (so 1 column with the dynamic listview.builder and textinput it works) But when I wrap it in a row and 2 columns I get the following error. RenderBox was not laid out: RenderShrinkWrappingViewport#5063b relayoutBoundary=up15 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

Here is some code for you to try out. If you want to let it fail uncomment both Expanded and Textinput.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: GamePage(),
    );
  }
}

class GamePage extends StatefulWidget {
  const GamePage({super.key});

  @override
  State<GamePage> createState() => _GamePageState();
}

class _GamePageState extends State<GamePage> {
  List<String> thrownScoresOne = [];
  List<String> thrownScoresTwo = [];
  int playerOne501 = 501;
  int playerTwo501 = 501;
  final TextEditingController _playerOneScoreController =
      TextEditingController();
  final TextEditingController _playerTwoScoreController =
      TextEditingController();

  @override
  void dispose() {
    _playerOneScoreController.dispose();
    _playerTwoScoreController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Game"),
      ),
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 32),
          width: double.infinity,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Column(
                children: [
                  Container(
                    child: Text("Player one"),
                  ),
                  Container(
                    child: Text(playerOne501.toString()),
                  ),
                  // Expanded(
                  //   child: ListView.builder(
                  //       shrinkWrap: true,
                  //       itemCount: thrownScoresOne.length,
                  //       itemBuilder: (BuildContext context, int index) {
                  //         return Text(thrownScoresOne[index]);
                  //       }),
                  // ),
                  // Flexible(
                  //   child: Container(
                  //     child: TextField(
                  //       controller: _playerOneScoreController,
                  //       decoration: InputDecoration(
                  //         hintText: "Score",
                  //         border: OutlineInputBorder(
                  //             borderSide: Divider.createBorderSide(context)),
                  //         focusedBorder: OutlineInputBorder(
                  //             borderSide: Divider.createBorderSide(context)),
                  //         enabledBorder: OutlineInputBorder(
                  //             borderSide: Divider.createBorderSide(context)),
                  //         filled: true,
                  //         contentPadding: const EdgeInsets.all(8),
                  //       ),
                  //       onSubmitted: (text) {
                  //         thrownScoresOne.add(text);
                  //         _playerOneScoreController.clear();
                  //         setState(() {});
                  //       },
                  //     ),
                  //   ),
                  // ),
                ],
              ),
              Column(
                children: [
                  Container(
                    child: Text("Player two"),
                  ),
                  Container(
                    child: Text(playerTwo501.toString()),
                  ),
                  // Expanded(
                  //   child: ListView.builder(
                  //       shrinkWrap: true,
                  //       itemCount: thrownScoresTwo.length,
                  //       itemBuilder: (BuildContext context, int index) {
                  //         return Text(thrownScoresTwo[index]);
                  //       }),
                  // ),
                  // Flexible(
                  //   child: Container(
                  //     child: TextField(
                  //       controller: _playerTwoScoreController,
                  //       decoration: InputDecoration(
                  //         hintText: "Score",
                  //         border: OutlineInputBorder(
                  //             borderSide: Divider.createBorderSide(context)),
                  //         focusedBorder: OutlineInputBorder(
                  //             borderSide: Divider.createBorderSide(context)),
                  //         enabledBorder: OutlineInputBorder(
                  //             borderSide: Divider.createBorderSide(context)),
                  //         filled: true,
                  //         contentPadding: const EdgeInsets.all(8),
                  //       ),
                  //       onSubmitted: (text) {
                  //         thrownScoresTwo.add(text);
                  //         _playerTwoScoreController.clear();
                  //         setState(() {});
                  //       },
                  //     ),
                  //   ),
                  // ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

I've tried with singlescrollview but that also doesnt help my problem.

CodePudding user response：

Wrap Row's Column with Expanded widget.

class _GamePageState extends State<GamePage> {
  List<String> thrownScoresOne = [];
  List<String> thrownScoresTwo = [];
  int playerOne501 = 501;
  int playerTwo501 = 501;
  final TextEditingController _playerOneScoreController =
      TextEditingController();
  final TextEditingController _playerTwoScoreController =
      TextEditingController();

  @override
  void dispose() {
    _playerOneScoreController.dispose();
    _playerTwoScoreController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Game"),
      ),
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 32),
          width: double.infinity,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Expanded(
                child: Column(
                  children: [
                    Container(
                      child: Text("Player one"),
                    ),
                    Container(
                      child: Text(playerOne501.toString()),
                    ),
                    Expanded(
                      child: ListView.builder(
                          shrinkWrap: true,
                          itemCount: thrownScoresOne.length,
                          itemBuilder: (BuildContext context, int index) {
                            return Text(thrownScoresOne[index]);
                          }),
                    ),
                    Flexible(
                      child: Container(
                        child: TextField(
                          controller: _playerOneScoreController,
                          decoration: InputDecoration(
                            hintText: "Score",
                            border: OutlineInputBorder(
                                borderSide: Divider.createBorderSide(context)),
                            focusedBorder: OutlineInputBorder(
                                borderSide: Divider.createBorderSide(context)),
                            enabledBorder: OutlineInputBorder(
                                borderSide: Divider.createBorderSide(context)),
                            filled: true,
                            contentPadding: const EdgeInsets.all(8),
                          ),
                          onSubmitted: (text) {
                            thrownScoresOne.add(text);
                            _playerOneScoreController.clear();
                            setState(() {});
                          },
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              Expanded(
                child: Column(
                  children: [
                    Container(
                      child: Text("Player two"),
                    ),
                    Container(
                      child: Text(playerTwo501.toString()),
                    ),
                    Expanded(
                      child: ListView.builder(
                          shrinkWrap: true,
                          itemCount: thrownScoresTwo.length,
                          itemBuilder: (BuildContext context, int index) {
                            return Text(thrownScoresTwo[index]);
                          }),
                    ),
                    Flexible(
                      child: Container(
                        child: TextField(
                          controller: _playerTwoScoreController,
                          decoration: InputDecoration(
                            hintText: "Score",
                            border: OutlineInputBorder(
                                borderSide: Divider.createBorderSide(context)),
                            focusedBorder: OutlineInputBorder(
                                borderSide: Divider.createBorderSide(context)),
                            enabledBorder: OutlineInputBorder(
                                borderSide: Divider.createBorderSide(context)),
                            filled: true,
                            contentPadding: const EdgeInsets.all(8),
                          ),
                          onSubmitted: (text) {
                            thrownScoresTwo.add(text);
                            _playerTwoScoreController.clear();
                            setState(() {});
                          },
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}