Container becoming invisible when adding TextFields to it in Flutter-CodePudding

I have a Container whitch needs to include two TextField where i can insert a product name and description. It is supposed to appear, and take its place, when a FloatingActionButton is pressed. This is actually working till I insert the TextField and I can't understand why.

This is the Cointainer code i wrote:

Padding(
  padding: const EdgeInsets.only(top: 4, bottom: 12),
  child: Container(
      width: 400,
      height: 125,
      decoration: BoxDecoration(
        color: Color(0xFF00ABB3),
        borderRadius: BorderRadius.all(Radius.circular(widgetsRadius))
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 20),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 25),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: const [
                  TextField(
                    decoration: InputDecoration(
                      hintText: "Name"
                    ),
                  ),
                  TextField(
                    decoration: InputDecoration(
                        hintText: "Description"
                    ),
                  )
                ],
              ),
            ),
            GestureDetector(
              onTap: () {
                setState(() {
                  isButtonVisible = !isButtonVisible;
                });
              },
              child: Icon(Icons.arrow_circle_right, color: Colors.white,)
            )
          ],
        ),
      ),
    ),
);

This is the result without the two TextField:

https://i.stack.imgur.com/PxWNp.png

This is the result with the two TextField:

https://i.stack.imgur.com/ttEY3.png

CodePudding user response：

If you run your code, you'll see this error in the output:

layoutConstraints.maxWidth < double.infinity
"An InputDecorator, which is typically created by a TextField, cannot have an unbounded width.\nThis happens when the parent widget does not provide a finite width constraint. For example, if the InputDecorator is contained by a Row, then its width must be constrained. An Expanded widget or a SizedBox can be used to constrain the width of the InputDecorator or the TextField that contains it."

This means that TextField is taking up an infinite width.

So, wrap your TextFied with a SizedBox:

SizedBox(
                      width: 100,
                      child: TextField(
                        decoration: InputDecoration(hintText: "Name"),
                      ),
                    ),

Additionally, you might want to increase the height of the parent Container() in order to view all the widgets as they're being cut off.

Here's a complete runnable example:

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 4, bottom: 12),
      child: Container(
        width: 400,
        height: 300,
        decoration: BoxDecoration(
            color: Color(0xFF00ABB3),
            borderRadius: BorderRadius.all(Radius.circular(15))),
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 20),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 25),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: const [
                    SizedBox(
                      width: 100,
                      child: TextField(
                        decoration: InputDecoration(hintText: "Name"),
                      ),
                    ),
                    SizedBox(
                      width: 100,
                      child: TextField(
                        decoration: InputDecoration(hintText: "Description"),
                      ),
                    )
                  ],
                ),
              ),
              GestureDetector(
                  onTap: () {
                    setState(() {
                      // isButtonVisible = !isButtonVisible;
                    });
                  },
                  child: Icon(
                    Icons.arrow_circle_right,
                    color: Colors.white,
                  ))
            ],
          ),
        ),
      ),
    );
    ;
  }
}

CodePudding user response：

You can wrap the Padding widget with Expanded, it will take the available width inside Row for TextField.

child: Padding(
  padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 20),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Expanded(child:Padding(
        padding: const EdgeInsets.symmetric(vertical: 25),
        child: Column(