Я хочу создать экран входа в систему, используя Flutter (Dart), как показано ниже.
Но это результат после того, как я это реализовал
Это мой код
import 'package:flutter/material.dart';
class LoginScreen extends StatelessWidget {
const LoginScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Container(
color: Colors.green,
height: 300,
child: Center(
child: Image.asset('assets/login_screen/clock.png'),
),
),
SizedBox(
height: 50.0,
),
Column(
children: <Widget>[
Center(
child: Column(
children: [
Text(
"Log in",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold,
),
),
Text(
"Lorem Ipsum is simply dummy text of the",
style: TextStyle(
fontSize: 15.0,
),
)
],
),
),
SizedBox(
height: 20.0,
),
Column(
children: <Widget>[
Container(
padding: EdgeInsets.symmetric(),
child: Column(
children: [
TextField(
style: TextStyle(
fontSize: 25.0,
color: Colors.grey,
),
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(),
prefixIcon: Icon(Icons.person_pin),
hintText: "Email",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
),
),
),
SizedBox(
height: 20.0,
),
TextField(
style: TextStyle(
fontSize: 25.0,
color: Colors.grey,
),
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(),
prefixIcon: Icon(Icons.lock),
hintText: "Password",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
),
),
),
SizedBox(
height: 20.0,
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
"Lupa Kata Sandi",
style: TextStyle(
fontSize: 15.0, color: Colors.yellow),
),
],
),
SizedBox(
height: 30.0,
),
SizedBox(
width: double.infinity,
height: 60.0,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
),
),
child: Text(
"Log In",
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
onPressed: () {
print("Login");
},
),
),
SizedBox(
height: 20.0,
),
Column(
children: [
Center(
child: Text(
"Lorem Ipsum is simply dummy text of the printing and typesetting industry."),
),
],
)
],
),
)
],
)
],
)
],
),
);
}
}
может ли кто-нибудь помочь мне решить эту проблему? Я хочу, чтобы дизайн в Design был таким же, как тот, который я реализовал в своем коде. Я новичок в реализации кода Flutter. В этой части меня попросили реализовать дизайн из Figma в код с помощью Flutter.





Вам просто нужно добавить к нему дополнение:
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25),
child: Column(
children: [
TextField(
style: TextStyle(
fontSize: 25.0,
color: Colors.grey,
),
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(),
prefixIcon: Icon(Icons.person_pin),
hintText: "Email",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
),
),
),
SizedBox(
height: 20.0,
),
TextField(
style: TextStyle(
fontSize: 25.0,
color: Colors.grey,
),
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(),
prefixIcon: Icon(Icons.lock),
hintText: "Password",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
),
),
),
SizedBox(
height: 20.0,
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
"Lupa Kata Sandi",
style:
TextStyle(fontSize: 15.0, color: Colors.yellow),
),
],
),
SizedBox(
height: 30.0,
),
SizedBox(
width: double.infinity,
height: 60.0,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
),
),
child: Text(
"Log In",
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
onPressed: () {
print("Login");
},
),
),
SizedBox(
height: 20.0,
),
Column(
children: [
Center(
child: Text(
"Lorem Ipsum is simply dummy text of the printing and typesetting industry."),
),
],
)
],
),
),
Не ставьте над ним ненужный Контейнер или Колонну. И настройте BorderRadius вашего TextField в соответствии с вашим дизайном.
Все готово; Приятного кодирования...