Container becoming invisible when adding TextFields to it in Flutter

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