如何將 SingleChildScrollView 與堆棧和容器一起使用？

Question

我想我理解這個問題，但我不知道如何解決它。 任何幫助都會很棒。

當我將背景圖像放入腳手架（使用容器）並使用 SingleChildScrollView 將項目堆疊到容器上時，我的屏幕變黑並且圖像不顯示。

主要問題發生在我的 login.dart 第 60-70 行。

這是我的登錄信息。dart

    import 'package:flutter/material.dart'; 
    import 'package:provider/provider.dart';
    
    import 'authentication.dart';
    
    class LoginScreen extends StatelessWidget {
      const LoginScreen({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
    
        return WillPopScope(onWillPop: () async => false, child: 
          Scaffold(
            backgroundColor: Colors.transparent,
            appBar: AppBar(
              elevation: 0,
              bottomOpacity: 0.0,
              title: IconButton(icon:Image.asset('assets/topImage.png'), iconSize: 65, 
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
              centerTitle: true,
            ),
            body: const Inputs(),
            extendBodyBehindAppBar: true,
          )
        );
      }
    }
    
    class Inputs extends StatefulWidget {
      const Inputs({Key? key}) : super(key: key);
    
      @override
      State<Inputs> createState() => _InputsState();
    }
    
    class _InputsState extends State<Inputs> {
      final emailInController = TextEditingController();
      final passwordInController = TextEditingController();
    
      final emailUpController = TextEditingController();
      final passwordUpController = TextEditingController();
    
      String loginTitle = "Login";
      bool _isVisible = true;
      String buttonText = "Sign In";
      String infoText = "Enter your email above and click \"Reset Password\". An email will be sent to reset your password";
    
      @override
      void dispose() {
        emailInController.dispose();
        passwordInController.dispose();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return SingleChildScrollView(
            child: Stack(children: [
              Container(
                decoration: const BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage("assets/bgImage.jpeg"),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Column(
              children: <Widget>[
                const SizedBox(height:120),
    
                // Top Login Text
                Center(child: Text(loginTitle, style: const TextStyle(fontSize: 35, fontFamily: 'samarkan')),),
    
                // Email Enter (Sign-In)
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 15),
                  child: TextField(
                    controller: emailInController,
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'Email',
                      hintText: 'Enter valid email id as abcgamil.com'
                    )
                  ),
                ),
    
                Visibility(
                  visible: _isVisible,
                  child: Column(
                    children: [
                    // Sign In Password
                    Padding(
                      padding: const EdgeInsets.only(
                        left: 15.0, right: 15.0, top: 15, bottom: 0
                      ),
                      child: TextField(
                        controller: passwordInController,
                        obscureText: true,
                        decoration: const InputDecoration(
                          border: OutlineInputBorder(),
                          labelText: 'Password',
                          hintText: 'Enter Secure Password'
                        ),
                      )
                    ),
    
                    // Forgot Password Text
                    TextButton(
                      onPressed: (){
                        setState(() {
                          loginTitle = "Password Reset";
                          _isVisible = !_isVisible;
                          buttonText = "Reset Password";
                        });
                      },  
                      child: const Text('Forgot Password', style: TextStyle(color: Colors.black, fontSize: 15),),
                    ),
                    ],
                  )
                ),
    
                // Text Above Submit
                Visibility(
                  visible: !_isVisible,
                  child: Text(infoText, 
                  style: const TextStyle(fontSize: 20, fontFamily: "Georgia"), 
                  textAlign: TextAlign.center)
                ),
    
                // Sign In Submit
                InkWell(
                  onTap: () {
                    context.read<AuthenticationService>().signIn(
                      email: emailInController.text.trim(), 
                      password: passwordInController.text.trim(),);
    
                    passwordInController.text = "";
    
                    if(!_isVisible) {
                      context.read<AuthenticationService>().passReset(email: emailInController.text);
    
                      setState(() {
                        _isVisible = true;
                        buttonText = "Sign In";
                        loginTitle = "Login";
                      });
                    }
    
                    emailInController.text = "";
                  },
                  child: Ink(
                    height: 50, 
                    width: 250, 
                    decoration: BoxDecoration(
                      color: Colors.black, 
                      borderRadius: BorderRadius.circular(20)
                    ),
                    child: Center(child: Text(buttonText, style: const TextStyle(color: Colors.white)))
                  )
                ),
    
                // Sign Up Text
                Divider(height: 40, color: Colors.grey[800], indent: 10, endIndent: 10,),
                const Center(child: Text("Sign Up", style: TextStyle(fontSize: 35, fontFamily: 'samarkan'))),
    
                // Sign Up Email
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 15),
                  child: TextField(
                    controller: emailUpController,
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'Email',
                      hintText: 'Enter valid email id as abcgamil.com'
                    )
                  ),
                ),
    
                // Sign Up Password
                Padding(
                  padding: const EdgeInsets.only(
                    left: 15.0, right: 15.0, top: 15, bottom: 0
                  ),
                  child: TextField(
                    controller: passwordUpController,
                    obscureText: true,
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'Password',
                      hintText: 'Enter Secure Password'
                    ),
                  )
                ),
    
                // Sign Up Submit
                Padding(
                  padding: const EdgeInsets.only(top: 15),
                  child: InkWell(
                    onTap: () {
                      context.read<AuthenticationService>().signUp(
                        email: emailUpController.text.trim(), 
                        password: passwordUpController.text.trim(),);
                       
                      emailInController.text = "";
                      passwordInController.text = "";
                    },
                    child: Ink(
                      height: 50, 
                      width: 250, 
                      decoration: BoxDecoration(
                        color: Colors.black, 
                        borderRadius: BorderRadius.circular(20)
                      ),
                      child: const Center(child: Text("Sign Up", style: TextStyle(color: Colors.white)))
                    )
                  )
                ),
              ]
            ),
          ])
        );
      }
    }

這是我運行它時發生的情況： https://drive.google.com/file/d/1QiBH2fZF8S_gIay23kI9QLkCKCtmzxDu/view?usp=sharing

再次感謝

Answer 1

您正在使用

Scaffold(backgroundColor: Colors.transparent,

嘗試提供一些顏色或使用默認的灰色

return WillPopScope(
    onWillPop: () async => false,
    child: Scaffold(
      // backgroundColor: Colors.transparent, // will get default grey
      appBar: AppBar(

並更改小部件裝飾，如

- Stack 
   - BackgroundImage, 
   - SingleChildScrollView
       - Column
         - Others

Answer 2

嘗試像這樣更改小部件層次結構

從 SingleChildScrollView->stack = [容器，列]

到 Stack = [Container,SingleChildScrollView->Column]

class LoginScreen extends StatelessWidget {
  const LoginScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
        onWillPop: () async => false,
        child: Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            elevation: 0,
            bottomOpacity: 0.0,
            title: IconButton(
              icon: Image.asset('assets/topImage.png'),
              iconSize: 65,
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            centerTitle: true,
          ),
          body: const Inputs(),
          extendBodyBehindAppBar: true,
        ));
  }
}

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

  @override
  State<Inputs> createState() => _InputsState();
}

class _InputsState extends State<Inputs> {
  final emailInController = TextEditingController();
  final passwordInController = TextEditingController();

  final emailUpController = TextEditingController();
  final passwordUpController = TextEditingController();

  String loginTitle = "Login";
  bool _isVisible = true;
  String buttonText = "Sign In";
  String infoText =
      "Enter your email above and click \"Reset Password\". An email will be sent to reset your password";

  @override
  void dispose() {
    emailInController.dispose();
    passwordInController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Container(
        color: Colors.red,
        // decoration: const BoxDecoration(
        // image: DecorationImage(
        //   image: AssetImage("assets/images/error.png"),
        //   fit: BoxFit.cover,
        // ),
        // ),
      ),
      SingleChildScrollView(
        child: Column(children: <Widget>[
          const SizedBox(height: 120),

          // Top Login Text
          Center(
            child: Text(loginTitle,
                style: const TextStyle(fontSize: 35, fontFamily: 'samarkan')),
          ),

          // Email Enter (Sign-In)
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15),
            child: TextField(
                controller: emailInController,
                decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Email',
                    hintText: 'Enter valid email id as abcgamil.com')),
          ),

          Visibility(
              visible: _isVisible,
              child: Column(
                children: [
                  // Sign In Password
                  Padding(
                      padding: const EdgeInsets.only(
                          left: 15.0, right: 15.0, top: 15, bottom: 0),
                      child: TextField(
                        controller: passwordInController,
                        obscureText: true,
                        decoration: const InputDecoration(
                            border: OutlineInputBorder(),
                            labelText: 'Password',
                            hintText: 'Enter Secure Password'),
                      )),

                  // Forgot Password Text
                  TextButton(
                    onPressed: () {
                      setState(() {
                        loginTitle = "Password Reset";
                        _isVisible = !_isVisible;
                        buttonText = "Reset Password";
                      });
                    },
                    child: const Text(
                      'Forgot Password',
                      style: TextStyle(color: Colors.black, fontSize: 15),
                    ),
                  ),
                ],
              )),

          // Text Above Submit
          Visibility(
              visible: !_isVisible,
              child: Text(infoText,
                  style: const TextStyle(fontSize: 20, fontFamily: "Georgia"),
                  textAlign: TextAlign.center)),

          // Sign In Submit
          InkWell(
              onTap: () {
                // context.read<AuthenticationService>().signIn(
                // email: emailInController.text.trim(),
                // password: passwordInController.text.trim(),);

                passwordInController.text = "";

                if (!_isVisible) {
                  // context.read<AuthenticationService>().passReset(email: emailInController.text);

                  setState(() {
                    _isVisible = true;
                    buttonText = "Sign In";
                    loginTitle = "Login";
                  });
                }

                emailInController.text = "";
              },
              child: Ink(
                  height: 50,
                  width: 250,
                  decoration: BoxDecoration(
                      color: Colors.black,
                      borderRadius: BorderRadius.circular(20)),
                  child: Center(
                      child: Text(buttonText,
                          style: const TextStyle(color: Colors.white))))),

          // Sign Up Text
          Divider(
            height: 40,
            color: Colors.grey[800],
            indent: 10,
            endIndent: 10,
          ),
          const Center(
              child: Text("Sign Up",
                  style: TextStyle(fontSize: 35, fontFamily: 'samarkan'))),

          // Sign Up Email
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15),
            child: TextField(
                controller: emailUpController,
                decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Email',
                    hintText: 'Enter valid email id as abcgamil.com')),
          ),

          // Sign Up Password
          Padding(
              padding: const EdgeInsets.only(
                  left: 15.0, right: 15.0, top: 15, bottom: 0),
              child: TextField(
                controller: passwordUpController,
                obscureText: true,
                decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Password',
                    hintText: 'Enter Secure Password'),
              )),

          // Sign Up Submit
          Padding(
              padding: const EdgeInsets.only(top: 15),
              child: InkWell(
                  onTap: () {
                    // context.read<AuthenticationService>().signUp(
                    // email: emailUpController.text.trim(),
                    // password: passwordUpController.text.trim(),);

                    emailInController.text = "";
                    passwordInController.text = "";
                  },
                  child: Ink(
                      height: 50,
                      width: 250,
                      decoration: BoxDecoration(
                          color: Colors.black,
                          borderRadius: BorderRadius.circular(20)),
                      child: const Center(
                          child: Text("Sign Up",
                              style: TextStyle(color: Colors.white)))))),
        ]),
      ),
    ]);
  }
}