英文:
Flutter: UI issues with sign up UI (Lift the sign up box to top and add a box to phone number pin 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(
'应用名称',
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),
width: 2.0,
),
),
padding: const EdgeInsets.all(32),
child: Column(
children: [
Container(
margin: const EdgeInsets.only(bottom: 32),
child: const Text(
'注册',
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: '姓名',
hintStyle: TextStyle(color: const Color(0x99d1d1d1)),
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),
),
),
child: const Text("注册",
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: "返回至",
style: TextStyle(color: Colors.black, fontSize: 15.0),
),
TextSpan(
text: ' 登录',
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black, fontSize: 15.0),
),
],
),
),
),
)
],
)),
]),
),
],
),
),
);
}
我面临两个问题：
- 我需要将 "应用名称" 文本移到顶部，然后将注册框移到顶部并显示 "返回登录" 文本。
- 我还需要添加一个用于电话号码验证码的文本框，就像顶部的图片一样。并且一开始需要显示提示文本，当前在突出显示
TextField后才可见。
英文:
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),
),
],
),
),
),
)
],
)),
]),
),
],
),
),
);
}
I am facing 2 issues:
- I need to move the "AppName" text to top then lift the sign up box to top and make visible the "Back to Sign In" text.
- Also I need to add a box for the phone number pin code like the top image. Hint text also I need to show initially, currently after highlighting the
TextFieldonly it is visible.
答案1
得分: 1
我已根据您的需求修改了您的代码。以下是我的 main.dart 文件，您可以在 此处查看代码。
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key});
@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({Key? key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final passwordTextfield = TextEditingController();
final confirmPasswordTextfield = 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,
),
],
),
],
),
),
),
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),
width: 2.0,
),
),
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:
<details>
<summary>英文:</summary>
I have modified your code as per your needs.<br>
The following is my `main.dart` file and you can view the [code here](https://dartpad.dev/?id=0d01433ac9f74f57857db03335483ad0).
```dart
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),
),
],
),
),
),
)
],
)),
]),
),
],
),
),
);
}
}
Here is the screenshot.<br>
答案2
得分: 0
以下是代码的中文翻译部分：
// Kk web的代码，带有一些轻微的更改：
final TextEditingController confirmPassController = TextEditingController();
final TextEditingController passController = TextEditingController();
final TextEditingController phoneController = TextEditingController();
bool _showPass = false;
bool _showConfirmPass = false;
@override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
backgroundColor: const Color(0xff32394a),
centerTitle: true,
title: const Text("AppName"), // 应用程序名称
titleTextStyle:
const TextStyle(fontSize: 26, fontWeight: FontWeight.w500),
),
body: SingleChildScrollView(
child: Stack(
clipBehavior: Clip.none,
children: [
Container(
width: width,
height: height * .30,
color: const Color(0xff32394a),
),
Center(
child: Column(
children: [
Container(
margin: const EdgeInsets.only(top: kToolbarHeight / 3),
width: MediaQuery.of(context).size.width * .85,
decoration: BoxDecoration(
color: const Color(0xffFFFFFF),
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: const Color(0xffe8e8e8),
width: 2.0,
),
),
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,
),
),
),
),
// 其他TextField的翻译类似，这里省略
Container(
margin: const EdgeInsets.only(bottom: 20),
child: TextField(
cursorColor: const Color(0x9932394a),
controller: passController,
obscureText: !_showPass,
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(
_showPass
? Icons.visibility
: Icons.visibility_off,
color: const Color(0x9932394a),
),
onPressed: () {
setState(() {
_showPass = !_showPass;
});
},
),
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: confirmPassController,
obscureText: !_showConfirmPass,
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(
_showConfirmPass
? Icons.visibility
: Icons.visibility_off,
color: const Color(0x9932394a),
),
onPressed: () {
setState(() {
_showConfirmPass = !_showConfirmPass;
});
},
),
contentPadding: const EdgeInsets.only(
left: 16,
right: 16,
top: 8,
bottom: 8,
),
),
),
),
MaterialButton(
onPressed: () {},
color: const Color(0xff32394a),
minWidth: width,
padding: const EdgeInsets.all(12.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
child: const Text(
"Register", // 注册
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
),
const SizedBox(
height: 25,
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: kToolbarHeight * .30),
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,
),
),
],
),
),
),
)
],
),
),
],
),
),
);
}
英文:
Kk web's code with some slight changes:
final TextEditingController confirmPassController = TextEditingController();
final TextEditingController passController = TextEditingController();
final TextEditingController phoneController = TextEditingController();
bool _showPass = false;
bool _showConfirmPass = false;
@override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
backgroundColor: const Color(0xff32394a),
centerTitle: true,
title: const Text("AppName"),
titleTextStyle:
const TextStyle(fontSize: 26, fontWeight: FontWeight.w500),
),
body: SingleChildScrollView(
child: Stack(
clipBehavior: Clip.none,
children: [
Container(
width: width,
height: height * .30,
color: const Color(0xff32394a),
),
Center(
child: Column(
children: [
Container(
margin: const EdgeInsets.only(top: kToolbarHeight / 3),
width: MediaQuery.of(context).size.width * .85,
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,
controller: phoneController,
maxLengthEnforcement: MaxLengthEnforcement.enforced,
decoration: InputDecoration(
prefixIcon: Container(
padding: const EdgeInsets.only(left: 10),
margin: const EdgeInsets.all(10),
height: 10,
width: 65,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.grey.withOpacity(0.10),
border: Border.all(
color: Colors.black,
)),
child: const Row(
children: [
Text("+1"),
Icon(Icons.arrow_drop_down),
],
),
),
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',
counterText: "",
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: passController,
obscureText: !_showPass,
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
_showPass
? Icons.visibility
: Icons.visibility_off,
color: const Color(0x9932394a),
),
onPressed: () {
// Update the state i.e. toogle the state of passwordVisible variable
setState(() {
_showPass = !_showPass;
});
},
),
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: confirmPassController,
obscureText: !_showConfirmPass,
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
_showConfirmPass
? Icons.visibility
: Icons.visibility_off,
color: const Color(0x9932394a),
),
onPressed: () {
// Update the state i.e. toogle the state of passwordVisible variable
setState(() {
_showConfirmPass =
!_showConfirmPass;
});
},
),
contentPadding: const EdgeInsets.only(
left: 16, right: 16, top: 8, bottom: 8)),
),
),
MaterialButton(
onPressed: () {},
color: const Color(0xff32394a),
minWidth: width,
padding: const EdgeInsets.all(12.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
child: const Text("Register",style: TextStyle(color: Colors.white,fontSize: 16),),
),
const SizedBox(
height: 25,
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: kToolbarHeight * .30),
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),
),
],
),
),
),
)
],
),
),
],
),
),
);
}
答案3
得分: 0
Here's the code with the translated comments and strings:
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
body: Stack(
children: <Widget>[
Positioned(
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.4,
color: const Color(0xff32394a), // Background color
),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.6,
color: const Color(0xffffffff), // Background color
),
],
),
),
Positioned(
top: 0,
bottom: 0,
right: 0,
left: 0,
child: SafeArea(
child: Column(
children: [
Container(
margin: EdgeInsets.only(top: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Icon(
(Icons.arrow_back_ios), // Back arrow icon
color: Colors.white,
),
flex: 1,
),
Expanded(
child: Text(
'AppName', // App name
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
color: Colors.white,
),
textAlign: TextAlign.center,
),
flex: 4,
),
Expanded(child: SizedBox())
],
),
),
SizedBox(
height: 20,
),
Expanded(
child: SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: 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), // Border color
width: 2.0, // Border width
),
),
padding: const EdgeInsets.all(32),
child: Padding(
padding:
EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: Column(
children: [
Container(
margin: const EdgeInsets.only(bottom: 32),
child: const Text(
'Sign Up', // Sign Up title
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
Container(
margin: const EdgeInsets.only(bottom: 16),
child: TextField(
cursorColor: const Color(0x9932394a), // Cursor color
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: const Color(0x9932394a)), // Border color
borderRadius: BorderRadius.circular(16),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(16)),
hintText: 'Full Name', // Full Name placeholder
hintStyle: TextStyle(
color: const Color(0x99d1d1d1)), // Hint text color
contentPadding: const EdgeInsets.only(
left: 16, right: 16, top: 8, bottom: 8),
),
),
),
// Other input fields and buttons continue here...
],
),
),
),
),
),
Container(
child: TextButton(
onPressed: () async {},
child: RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: "Back to", // "Back to" text
style: TextStyle(
color: Colors.black, fontSize: 15.0),
),
TextSpan(
text: ' Sign In', // "Sign In" text
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 15.0),
),
],
),
),
),
)
],
),
),
),
],
),
);
}
This code has been translated into Chinese. Let me know if you need any further modifications or assistance.
英文:
You can achieve the result via below code
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
body: Stack(
children: <Widget>[
Positioned(
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.4,
color: const Color(0xff32394a),
),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.6,
color: const Color(0xffffffff),
),
],
),
),
Positioned(
top: 0,
bottom: 0,
right: 0,
left: 0,
child: SafeArea(
child: Column(
children: [
Container(
margin: EdgeInsets.only(top: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Icon(
(Icons.arrow_back_ios),
color: Colors.white,
),
flex: 1,
),
Expanded(
child: Text(
'AppName',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
color: Colors.white,
),
textAlign: TextAlign.center,
),
flex: 4,
),
Expanded(child: SizedBox())
],
),
),
SizedBox(
height: 20,
),
Expanded(
child: SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: 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: Padding(
padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
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: Container(
padding: EdgeInsets.only(left: 10),
margin: EdgeInsets.all(10),
height: 10,
width: 65,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(8),
color: Colors.grey
.withOpacity(0.10),
border: Border.all(
color: Colors.black,
)),
child: Row(
children: [
Text("+1"),
Icon(Icons.arrow_drop_down),
],
),
),
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',
counterText: "",
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: () {},
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(
child: TextButton(
onPressed: () async {},
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),
),
],
),
),
),
)
],
),
),
),
],
),
);
}
答案4
得分: -1
final confirm_password_textfield = TextEditingController();
final password_textfield = TextEditingController();
bool _passwordVisible = false;
bool _confirmpasswordVisible = false;
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Stack(
clipBehavior: Clip.none,
children: [
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.4,
color: const Color(0xff32394a),
child: const Column(
children: [
Padding(
padding: EdgeInsets.only(top: 55, left: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.arrow_back_ios_new_outlined,
color: Colors.white,
),
Text(
'AppName',
style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold, color: Colors.white),
),
SizedBox(
width: 10,
height: 10,
)
],
),
),
],
),
),
Positioned(
top: MediaQuery.of(context).size.height * 0.25 - 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),
width: 2.0,
),
),
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: Container(
padding: EdgeInsets.only(left: 10),
margin: EdgeInsets.all(10),
height: 10,
width: 65,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.grey.withOpacity(0.10),
border: Border.all(
color: Colors.black,
)),
child: Row(
children: [
Text("+1"),
Icon(Icons.arrow_drop_down),
],
),
),
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',
counterText: "",
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(
_passwordVisible ? Icons.visibility : Icons.visibility_off,
color: const Color(0x9932394a),
),
onPressed: () {
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(
_confirmpasswordVisible ? Icons.visibility : Icons.visibility_off,
color: const Color(0x9932394a),
),
onPressed: () {
setState(() {
_confirmpasswordVisible = !_confirmpasswordVisible;
});
},
),
contentPadding: const EdgeInsets.only(left:
<details>
<summary>英文:</summary>
final confirm_password_textfield = TextEditingController();
final password_textfield = TextEditingController();
bool _passwordVisible = false;
bool _confirmpasswordVisible = false;
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Stack(
clipBehavior: Clip.none,
children: [
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.4,
color: const Color(0xff32394a),
child: const Column(
children: [
Padding(
padding: EdgeInsets.only(top: 55, left: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.arrow_back_ios_new_outlined,
color: Colors.white,
),
Text(
'AppName',
style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold, color: Colors.white),
),
SizedBox(
width: 10,
height: 10,
)
],
),
),
],
),
),
Positioned(
top: MediaQuery.of(context).size.height * 0.25 - 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: Container(
padding: EdgeInsets.only(left: 10),
margin: EdgeInsets.all(10),
height: 10,
width: 65,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.grey.withOpacity(0.10),
border: Border.all(
color: Colors.black,
)
),
child: Row(
children: [
Text("+1"),
Icon(Icons.arrow_drop_down),
],
),
),
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',
counterText: "",
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: () {},
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),
),
],
),
),
),
)
],
)),
],
),
),
);
}
Try this code
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论