#flutter
Вопрос:
Я новичок в flutter, кто-нибудь может помочь мне узнать, как добиться дизайна экрана, как показано на скриншоте, используя flutter.
Ниже приведен код, которого я достиг до сих пор:
Container(
padding: EdgeInsets.all(16.0),
child: Row(
children: [
Container(
width: 50.0,
height: 48.0,
child: Padding(
padding: const EdgeInsets.only(left: 5, right: 5),
child: TextField(
style: TextStyle(
fontSize: 10.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
autocorrect: true,
decoration: InputDecoration(
hintStyle: TextStyle(color: Colors.grey),
fillColor: Colors.white70,
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.greenAccent),
),
),
)),
),
Container(
width: 50.0,
height: 48.0,
child: Padding(
padding: const EdgeInsets.only(left: 5, right: 5),
child: TextField(
style: TextStyle(
fontSize: 10.0,
color: Colors.black,
),
autocorrect: true,
decoration: InputDecoration(
hintStyle: TextStyle(color: Colors.grey),
fillColor: Colors.white70,
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.greenAccent),
),
),
)),
),
Container(
width: 50.0,
height: 48.0,
child: Padding(
padding: const EdgeInsets.only(left: 5, right: 5),
child: TextField(
style: TextStyle(
fontSize: 10.0,
color: Colors.black,
),
autocorrect: true,
decoration: InputDecoration(
hintStyle: TextStyle(color: Colors.grey),
fillColor: Colors.white70,
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.greenAccent),
),
),
)),
),
Container(
width: 50.0,
height: 48.0,
child: Padding(
padding: const EdgeInsets.only(left: 5, right: 5),
child: TextField(
style: TextStyle(
fontSize: 10.0,
color: Colors.black,
),
autocorrect: true,
decoration: InputDecoration(
hintStyle: TextStyle(color: Colors.grey),
fillColor: Colors.white70,
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.greenAccent),
),
),
)),
),
Container(
width: 50.0,
height: 48.0,
child: Padding(
padding: const EdgeInsets.only(left: 5, right: 5),
child: TextField(
style: TextStyle(
fontSize: 10.0,
color: Colors.black,
),
autocorrect: true,
decoration: InputDecoration(
hintStyle: TextStyle(color: Colors.grey),
fillColor: Colors.white70,
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.greenAccent),
),
),
)),
),
Container(
width: 50.0,
height: 48.0,
child: Padding(
padding: const EdgeInsets.only(left: 5, right: 5),
child: TextField(
style: TextStyle(
fontSize: 10.0,
color: Colors.black,
),
autocorrect: true,
decoration: InputDecoration(
hintStyle: TextStyle(color: Colors.grey),
fillColor: Colors.white70,
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.greenAccent),
),
),
)),
),
],
),
),
Комментарии:
1. Не могли бы вы более четко указать, чего вы хотите достичь?
2. Это должно быть поле ввода пароля? Если да, пожалуйста, предоставьте лучшее изображение.
3. обновлено изображение
Ответ №1:
https://github.com/ChiragKothiya1996/Flutter/blob/main/Otp.dart
Используйте этот файл для отображения так же, как и в представлении otp
Комментарии:
1. Пропущен файл AppColor, SvgPicture?
2. вы можете использовать свой цвет и значки
3. Файл обновлен, теперь вы можете использовать без ошибок.