2

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.

1 Answer 1

1

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(() {});
                          },
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}


Sign up to request clarification or add additional context in comments.

1 Comment

Glad to help, you can find more about Layout

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.