Flutter：注册 UI 出现 UI 问题(将注册框提升到顶部并向电话号码 pin 码添加一个框)

发布于07月20日

I am trying to create a sign-up UI like below:个

Below is my developed UI:个

My Code:个

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              child: Stack(children: <Widget>[
                Positioned(
                    child: Container(
                      width: MediaQuery.of(context).size.width,
                      height: MediaQuery.of(context).size.height * 0.4,
                      color: const Color(0xff32394a),
                      child: Center(
                          child: MaterialButton(
                              onPressed: () {},
                              child: const Text(
                                'AppName',
                                style: TextStyle(
                                    fontSize: 40,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.white
                                ),
                              ))),
                    )),
                Positioned(
                    top: MediaQuery.of(context).size.height * 0.4 - 100,
                    left: 32,
                    right: 32,
                    child: Column(
                      children: [
                        Container(
                          width: MediaQuery.of(context).size.width - 64,
                          decoration: BoxDecoration(
                            color: const Color(0xffFFFFFF),
                            borderRadius: BorderRadius.circular(20),
                            border: Border.all(
                              color: const Color(0xffe8e8e8),  // Set the border color here
                              width: 2.0,        // Set the border width
                            ),
                          ),
                          padding: const EdgeInsets.all(32),
                          child: Column(
                            children: [
                              Container(
                                margin: const EdgeInsets.only(bottom: 32),
                                child: const Text(
                                  'Sign Up',
                                  style: TextStyle(
                                    fontSize: 24,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(bottom: 16),
                                child: TextField(
                                  cursorColor: const Color(0x9932394a),
                                  decoration: InputDecoration(
                                      focusedBorder: OutlineInputBorder(
                                        borderSide: BorderSide(color: const Color(0x9932394a)),
                                        borderRadius: BorderRadius.circular(16),
                                      ),
                                      border: OutlineInputBorder(
                                          borderRadius:
                                          BorderRadius.circular(16)),
                                      hintText: 'Full Name',
                                      hintStyle: TextStyle(color: const Color(0x99d1d1d1)),
                                      contentPadding: const EdgeInsets.only(
                                          left: 16,
                                          right: 16,
                                          top: 8,
                                          bottom: 8)),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(bottom: 16),
                                child: TextField(
                                  cursorColor: const Color(0x9932394a),
                                  decoration: InputDecoration(
                                      focusedBorder: OutlineInputBorder(
                                        borderSide: BorderSide(color: const Color(0x9932394a)),
                                        borderRadius: BorderRadius.circular(16),
                                      ),
                                      border: OutlineInputBorder(
                                          borderRadius:
                                          BorderRadius.circular(16)),
                                      hintText: 'Email',
                                      hintStyle: TextStyle(color: const Color(0x99d1d1d1)),
                                      contentPadding: const EdgeInsets.only(
                                          left: 16,
                                          right: 16,
                                          top: 8,
                                          bottom: 8)),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(bottom: 16),
                                child: TextField(
                                  cursorColor: const Color(0x9932394a),
                                  keyboardType: TextInputType.phone,
                                  maxLength: 10,
                                  maxLengthEnforcement: MaxLengthEnforcement.enforced,
                                  decoration: InputDecoration(
                                      prefixIcon: Icon(Icons.arrow_drop_down),
                                      labelText: '+1',
                                      suffixIconColor: const Color(0x9932394a),
                                      focusedBorder: OutlineInputBorder(
                                        borderSide: BorderSide(color: const Color(0x9932394a)),
                                        borderRadius: BorderRadius.circular(16),
                                      ),
                                      border: OutlineInputBorder(
                                          borderRadius:
                                          BorderRadius.circular(16)),
                                      hintText: 'Phone Number',
                                      hintStyle: TextStyle(color: const Color(0x99d1d1d1)),
                                      contentPadding: const EdgeInsets.only(
                                          left: 16,
                                          right: 16,
                                          top: 8,
                                          bottom: 8)),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(bottom: 16),
                                child: TextField(
                                  cursorColor: const Color(0x9932394a),
                                  decoration: InputDecoration(
                                      focusedBorder: OutlineInputBorder(
                                        borderSide: BorderSide(color: const Color(0x9932394a)),
                                        borderRadius: BorderRadius.circular(16),
                                      ),
                                      border: OutlineInputBorder(
                                          borderRadius:
                                          BorderRadius.circular(16)),
                                      hintText: 'Username',
                                      hintStyle: TextStyle(color: const Color(0x99d1d1d1)),
                                      contentPadding: const EdgeInsets.only(
                                          left: 16,
                                          right: 16,
                                          top: 8,
                                          bottom: 8)),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(bottom: 20),
                                child: TextField(
                                  cursorColor: const Color(0x9932394a),
                                  controller: password_textfield,
                                  obscureText: !_passwordVisible,
                                  decoration: InputDecoration(
                                      focusedBorder: OutlineInputBorder(
                                        borderSide: BorderSide(color: const Color(0x9932394a)),
                                        borderRadius: BorderRadius.circular(16),
                                      ),
                                      border: OutlineInputBorder(
                                          borderRadius:
                                          BorderRadius.circular(16)),
                                      hintText: 'Password',
                                      hintStyle: TextStyle(color: const Color(0x99d1d1d1)),
                                      suffixIcon: IconButton(
                                        icon: Icon(
                                          // Based on passwordVisible state choose the icon
                                          _passwordVisible
                                              ? Icons.visibility
                                              : Icons.visibility_off,
                                          color: const Color(0x9932394a),
                                        ),
                                        onPressed: () {
                                          // Update the state i.e. toogle the state of passwordVisible variable
                                          setState(() {
                                            _passwordVisible = !_passwordVisible;
                                          });
                                        },
                                      ),
                                      contentPadding: const EdgeInsets.only(
                                          left: 16,
                                          right: 16,
                                          top: 8,
                                          bottom: 8)),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(bottom: 20),
                                child: TextField(
                                  cursorColor: const Color(0x9932394a),
                                  controller: confirm_password_textfield,
                                  obscureText: !_confirmpasswordVisible,
                                  decoration: InputDecoration(
                                      focusedBorder: OutlineInputBorder(
                                        borderSide: BorderSide(color: const Color(0x9932394a)),
                                        borderRadius: BorderRadius.circular(16),
                                      ),
                                      border: OutlineInputBorder(
                                          borderRadius:
                                          BorderRadius.circular(16)),
                                      hintText: 'Confirm Password',
                                      hintStyle: TextStyle(color: const Color(0x99d1d1d1)),
                                      suffixIcon: IconButton(
                                        icon: Icon(
                                          // Based on passwordVisible state choose the icon
                                          _confirmpasswordVisible
                                              ? Icons.visibility
                                              : Icons.visibility_off,
                                          color: const Color(0x9932394a),
                                        ),
                                        onPressed: () {
                                          // Update the state i.e. toogle the state of passwordVisible variable
                                          setState(() {
                                            _confirmpasswordVisible = !_confirmpasswordVisible;
                                          });
                                        },
                                      ),
                                      contentPadding: const EdgeInsets.only(
                                          left: 16,
                                          right: 16,
                                          top: 8,
                                          bottom: 8)),
                                ),
                              ),
                              Row(

                                mainAxisSize: MainAxisSize.max,
                                children: [
                                  Expanded(
                                    child: ElevatedButton(
                                      onPressed: () {
                                        StartRegistration();
                                      },
                                      style: ElevatedButton.styleFrom(
                                        backgroundColor: const Color(0x9932394a),
                                        minimumSize: Size(double.infinity, 50),
                                        textStyle: TextStyle(
                                            fontWeight: FontWeight.bold,
                                            fontSize: 18
                                        ),
                                        shape: RoundedRectangleBorder(
                                          borderRadius: BorderRadius.circular(20), // Adjust the value as per your requirement
                                        ),
                                      ),
                                      child: const Text("Register",
                                          style: TextStyle(
                                            color: Colors.white,
                                          )),
                                    ),
                                  ),
                                ],
                              ),
                              const SizedBox(
                                height: 25,
                              ),
                            ],
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 32),
                          child: TextButton(
                            onPressed: () async{
                              Navigator.of(context).pop();
                            },
                            child: RichText(
                              text: TextSpan(
                                children: <TextSpan>[
                                  TextSpan(
                                    text: "Back to",
                                    style: TextStyle(color: Colors.black, fontSize: 15.0),
                                  ),
                                  TextSpan(
                                    text: ' Sign In',
                                    style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black, fontSize: 15.0),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        )
                      ],
                    )),
              ]),
            ),
          ],
        ),
      ),
    );
  }

我面临着两个问题:

我需要将"AppName"文本移到顶部，然后将注册框抬到顶部，并使"Back to Sign In"文本可见.
此外，我需要添加一个类似于顶部图像的电话号码PIN代码框.提示文字也是我最初需要显示的，目前高亮显示后只有TextField它是可见的.

import 'package:flutter/material.dart'; import 'package:flutter/services.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( colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true, ), home: const MyHomePage(), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key}); @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { final password_textfield = TextEditingController(); final confirm_password_textfield = TextEditingController(); late List<String> countryCodes; String _countryCode = "+1"; bool _passwordVisible = false; bool _confirmpasswordVisible = false; @override void initState() { super.initState(); countryCodes = []; for (int i = 0; i < 100; i++) { countryCodes.add("+$i"); } } void StartRegistration() {} @override Widget build(BuildContext context) { return Scaffold( body: SingleChildScrollView( child: Column( children: [ SizedBox( width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height, child: Stack(children: <Widget>[ Positioned( child: Container( width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height * 0.4, color: const Color(0xff32394a), child: Column( children: [ const SizedBox( height: kToolbarHeight + 10, ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ const Padding( padding: EdgeInsets.only(left:8.0), child: Icon(Icons.chevron_left,color: Colors.white,size: 48,), ), MaterialButton( onPressed: () {}, child: const Text( 'AppName', style: TextStyle( fontSize: 40, fontWeight: FontWeight.bold, color: Colors.white), )), const SizedBox(width: 56,), // for row layout spacing (icon + padding) ], ), ], ), )), Positioned( top: MediaQuery.of(context).size.height * 0.4 - 200, left: 32, right: 32, child: Column( children: [ Container( width: MediaQuery.of(context).size.width - 64, decoration: BoxDecoration( color: const Color(0xffFFFFFF), borderRadius: BorderRadius.circular(20), border: Border.all( color: const Color(0xffe8e8e8), // Set the border color here width: 2.0, // Set the border width ), ), padding: const EdgeInsets.all(32), child: Column( children: [ Container( margin: const EdgeInsets.only(bottom: 32), child: const Text( 'Sign Up', style: TextStyle( fontSize: 24, fontWeight: FontWeight.bold, ), ), ), Container( margin: const EdgeInsets.only(bottom: 16), child: TextField( cursorColor: const Color(0x9932394a), decoration: InputDecoration( focusedBorder: OutlineInputBorder( borderSide: const BorderSide( color: Color(0x9932394a)), borderRadius: BorderRadius.circular(16), ), border: OutlineInputBorder( borderRadius: BorderRadius.circular(16)), hintText: 'Full Name', hintStyle: const TextStyle( color: Color(0x99d1d1d1)), contentPadding: const EdgeInsets.only( left: 16, right: 16, top: 8, bottom: 8)), ), ), Container( margin: const EdgeInsets.only(bottom: 16), child: TextField( cursorColor: const Color(0x9932394a), decoration: InputDecoration( focusedBorder: OutlineInputBorder( borderSide: const BorderSide( color: Color(0x9932394a)), borderRadius: BorderRadius.circular(16), ), border: OutlineInputBorder( borderRadius: BorderRadius.circular(16)), hintText: 'Email', hintStyle: const TextStyle( color: Color(0x99d1d1d1)), contentPadding: const EdgeInsets.only( left: 16, right: 16, top: 8, bottom: 8)), ), ), Container( margin: const EdgeInsets.only(bottom: 16), child: TextField( cursorColor: const Color(0x9932394a), keyboardType: TextInputType.phone, maxLength: 10, maxLengthEnforcement: MaxLengthEnforcement.enforced, decoration: InputDecoration( prefixIcon: Row( mainAxisSize: MainAxisSize.min, children: [ DropdownButtonHideUnderline( child: Container( margin: const EdgeInsets.only( left: 16, right: 16), padding: EdgeInsets.only( top: 2, bottom: 2), decoration: const ShapeDecoration( shape: RoundedRectangleBorder( side: BorderSide( width: 1.0, style: BorderStyle.solid), borderRadius: BorderRadius.all( Radius.circular( 5.0)), ), color: Color.fromRGBO( 240, 240, 240, 1)), child: DropdownButton( itemHeight: null, borderRadius: const BorderRadius.all( Radius.circular(16)), value: _countryCode, padding: const EdgeInsets.only( left: 16), isDense: true, items: countryCodes.map((e) { return DropdownMenuItem< String>( value: e, child: Text(e), ); }).toList(), onChanged: (dynamic value) { setState(() { _countryCode = value; }); }, ), ), ), ], ), suffixIconColor: const Color(0x9932394a), focusedBorder: OutlineInputBorder( borderSide: const BorderSide( color: Color(0x9932394a)), borderRadius: BorderRadius.circular(16), ), border: OutlineInputBorder( borderRadius: BorderRadius.circular(16)), hintText: 'Phone Number', hintStyle: const TextStyle( color: Color(0x99d1d1d1)), contentPadding: const EdgeInsets.only( left: 16, right: 16, top: 8, bottom: 8)), ), ), Container( margin: const EdgeInsets.only(bottom: 16), child: TextField( cursorColor: const Color(0x9932394a), decoration: InputDecoration( focusedBorder: OutlineInputBorder( borderSide: const BorderSide( color: Color(0x9932394a)), borderRadius: BorderRadius.circular(16), ), border: OutlineInputBorder( borderRadius: BorderRadius.circular(16)), hintText: 'Username', hintStyle: const TextStyle( color: Color(0x99d1d1d1)), contentPadding: const EdgeInsets.only( left: 16, right: 16, top: 8, bottom: 8)), ), ), Container( margin: const EdgeInsets.only(bottom: 20), child: TextField( cursorColor: const Color(0x9932394a), controller: password_textfield, obscureText: !_passwordVisible, decoration: InputDecoration( focusedBorder: OutlineInputBorder( borderSide: const BorderSide( color: Color(0x9932394a)), borderRadius: BorderRadius.circular(16), ), border: OutlineInputBorder( borderRadius: BorderRadius.circular(16)), hintText: 'Password', hintStyle: const TextStyle( color: Color(0x99d1d1d1)), suffixIcon: IconButton( icon: Icon( // Based on passwordVisible state choose the icon _passwordVisible ? Icons.visibility : Icons.visibility_off, color: const Color(0x9932394a), ), onPressed: () { // Update the state i.e. toogle the state of passwordVisible variable setState(() { _passwordVisible = !_passwordVisible; }); }, ), contentPadding: const EdgeInsets.only( left: 16, right: 16, top: 8, bottom: 8)), ), ), Container( margin: const EdgeInsets.only(bottom: 20), child: TextField( cursorColor: const Color(0x9932394a), controller: confirm_password_textfield, obscureText: !_confirmpasswordVisible, decoration: InputDecoration( focusedBorder: OutlineInputBorder( borderSide: const BorderSide( color: Color(0x9932394a)), borderRadius: BorderRadius.circular(16), ), border: OutlineInputBorder( borderRadius: BorderRadius.circular(16)), hintText: 'Confirm Password', hintStyle: const TextStyle( color: Color(0x99d1d1d1)), suffixIcon: IconButton( icon: Icon( // Based on passwordVisible state choose the icon _confirmpasswordVisible ? Icons.visibility : Icons.visibility_off, color: const Color(0x9932394a), ), onPressed: () { // Update the state i.e. toogle the state of passwordVisible variable setState(() { _confirmpasswordVisible = !_confirmpasswordVisible; }); }, ), contentPadding: const EdgeInsets.only( left: 16, right: 16, top: 8, bottom: 8)), ), ), Row( mainAxisSize: MainAxisSize.max, children: [ Expanded( child: ElevatedButton( onPressed: () { StartRegistration(); }, style: ElevatedButton.styleFrom( backgroundColor: const Color(0x9932394a), minimumSize: const Size(double.infinity, 50), textStyle: const TextStyle( fontWeight: FontWeight.bold, fontSize: 18), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular( 20), // Adjust the value as per your requirement ), ), child: const Text("Register", style: TextStyle( color: Colors.white, )), ), ), ], ), const SizedBox( height: 25, ), ], ), ), Container( margin: const EdgeInsets.only(top: 32), child: TextButton( onPressed: () async { Navigator.of(context).pop(); }, child: RichText( text: const TextSpan( children: <TextSpan>[ TextSpan( text: "Back to", style: TextStyle( color: Colors.black, fontSize: 15.0), ), TextSpan( text: ' Sign In', style: TextStyle( fontWeight: FontWeight.bold, color: Colors.black, fontSize: 15.0), ), ], ), ), ), ) ], )), ]), ), ], ), ), ); } }

Flutter：注册 UI 出现 UI 问题(将注册框提升到顶部并向电话号码 pin 码添加一个框)

推荐答案

Flutter相关问答推荐

如何防止alert 对话框在收到通知时出现在某个flutter页面中

如何解决这个错误，同时获得的高度的小部件，因此高度的可用工作区域在Flutter ？

如何更新文本字段的基础上的选定下拉菜单？

SingleChildScrollView正在将Container的高度限制为子对象，尽管使用了Expanded Inside Row()

BlocBuilder仅生成一次，并在后续发出时停止重建

如何使页面浏览量达到活动页面所要求的高度？

如何使用flutter_local_notification包处理通知操作？

Android Studio扩展控件上未加载Google map

Ffmpeg_kit_fltter：^6.0.3版权问题

通过Ffltter应用程序与Docker服务器进行交互以进行身份验证

如何翻转这种剪刀设计

如何在 Flutter 中创建厚度沿着容器逐渐减小的边框

Flutter：使用 GlobalKey 访问 BlocProvider

在flutter中从图库或相机中 Select 图像的方法

无法将Null类型的值分配给 const 构造函数中List类型的参数

如何在android中 Select 任何文件/文件路径 - Flutter

使用 riverpod 提供 GoRouter 实例的正确方法是什么？

我无法从 Cloud firestore 访问文档字段并在 statefulwidget 类中显示它

如何在 flutter 中过滤 DateTime(intl)？

设计响应式卡片的最佳方法，以避免像素溢出错误或 _AssertionError