Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – TextFormFields are not appearing in the Stack

My Error Image

image

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      bottom: false,
      child: Scaffold(
        body: Stack(
          alignment: Alignment.topCenter,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(color: Colors.white),
            ),
            Positioned(
              top: 86,
              bottom: 294,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Image(
                    width: 104,
                    height: 112,
                    image: AssetImage('assets/images/rootinelogo.png'),
                  ),
                  SizedBox(
                    height: 24,
                  ),
                  Text(
                    'Rootine',
                    style: TextStyle(
                      fontFamily: 'Grandstander',
                      fontSize: 32,
                      fontWeight: FontWeight.bold,
                      color: Colors.black,
                    ),
                  ),
                  SizedBox(
                    height: 48,
                  ),
                  LoginForm(),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

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

  @override
  State<LoginForm> createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
  final _formKey = GlobalKey<FormState>();
  TextEditingController emailController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Flexible(
            child: TextFormField(
              controller: emailController,
              decoration: InputDecoration(border: OutlineInputBorder(), labelText: 'Email'),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please enter your email';
                }
                return null;
              },
            ),
          ),
          Flexible(
            child: TextFormField(
              obscureText: true,
              controller: passwordController,
              decoration: InputDecoration(border: OutlineInputBorder(), labelText: 'Password'),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please enter your password';
                }
                return null;
              },
            ),
          ),
        ],
      ),
    );
  }
}

I wanted to build login page. Normally I build with just Column, and it is ok. But, now I used Stack Widget because I have some images to overlap in the page. Everything was fine until LoginForm class. After building LoginForm, the error was started and TextFormField didn’t appear. Although I couldn’t capture the errors because android debug logs kept running, I saw the errors are in Stack and Column widget from LoginForm. Please help me to fix the errors and guide me that how can I solve? Thank you.

Tags:

2

Answers


  1. 0

    I will suggest using Align widget or use either top or bottom have the enough space.

    body: Stack(
  alignment: Alignment.topCenter,
  children: <Widget>[
    ...
    Align(
      alignment: Alignment(0, -0.5), // range is -1,1
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
    Login or Signup to reply.
  2. 0

    enter image description here

    I don’t know the full picture and I don’t understand what your login screen should be like, but I guess it’s something like what I got

    If I correctly understood the layout and layout of your screen, then the solution is that in general you don’t need Stack in your widget, by removing it you will see the input fields, as shown in my screenshot, if you need any more help, let me know!

    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(
      title: 'Flutter Demo',
      theme: ThemeData(
      ),
      home: const Home(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      bottom: false,
      child: Scaffold(
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(
              'Rootine',
              style: TextStyle(
                fontFamily: 'Grandstander',
                fontSize: 32,
                fontWeight: FontWeight.bold,
                color: Colors.black,
              ),
            ),
            Image(
              width: 104,
              height: 112,
              image: AssetImage('assets/flutter_logo.png'),
            ),
            SizedBox(
              height: 24,
            ),
            SizedBox(
              height: 48,
            ),
            LoginForm(),
            SizedBox(
              height: 48,
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  State<LoginForm> createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
  final _formKey = GlobalKey<FormState>();
  TextEditingController emailController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          TextFormField(
            controller: emailController,
            decoration: const InputDecoration(border: OutlineInputBorder(), labelText: 'Email'),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter your email';
              }
              return null;
            },
          ),
          SizedBox(
            height: 48,
          ),
          TextFormField(
            obscureText: true,
            controller: passwordController,
            decoration: const InputDecoration(border: OutlineInputBorder(), labelText: 'Password'),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter your password';
              }
              return null;
            },
          ),
        ],
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search