Как открыть клавиатуру, а textFormField навести курсор на клавиатуру при открытии Dart Flutter showModalBottomSheet?
У меня есть такое приложение:
Когда я нажимаю floatActionButton ниже, происходит следующее:
Когда я выхожу на этот экран, я хочу, чтобы клавиатура открывалась автоматически.
Когда я сам нажимаю textFormField, появляется такой экран:
Клавиатура опережает textFormField. Как предотвратить это?
Итак, когда открывается showModalBottomSheet, я хочу, чтобы клавиатура открывалась автоматически, а клавиатура не попадала перед textFormField. Как я могу это сделать?
Я хочу сделать так:
Коды:
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
backgroundColor: Colors.white,
context: context,
builder: (context) {
return Container(
height: 125,
child: Column(
children: [
Expanded(
child: TextFormField(
decoration: InputDecoration(
labelText: 'Add new task',
labelStyle: TextStyle(
color: Colors.black,
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
),
),
),
style: TextStyle(
color: Colors.black,
),
),
)
],
),
);
},
);
Заранее спасибо за помощь.
Ответы 1
Оберните свой контейнер другим контейнером и дайте
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
),
а также дайте isScrollControlled: true в showModalBottomSheet()
Как и в вашем примере,
showModalBottomSheet(
isScrollControlled: true,
backgroundColor: Colors.white,
context: context,
builder: (context) {
return Container(
padding: EdgeInsets.only(
bottom: MediaQuery
.of(context)
.viewInsets
.bottom,
),
child: Container(
height: 125,
child: Column(
children: [
Expanded(
child: TextFormField(
decoration: InputDecoration(
labelText: 'Add new task',
labelStyle: TextStyle(
color: Colors.black,
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
),
),
),
style: TextStyle(
color: Colors.black,
),
),
)
],
),
),
);
},
);
Для размещения разделителя под textFormField вам не нужно использовать Divider, вы можете использовать свойство border внутри TextFormField и дать UnderlineInputBorder и дать ему свойство borderSide. Теперь подчеркивание отображается точно под TextFormField. Для границы и focusBorder вы можете использовать другой цвет, если хотите.
Привет. Благодарю за ваш ответ. Ваш код работал именно так, как я хотел. Я также добавил
Dividerпод этимtextFormField. Но почему-то он идет прямо под полем. Я хочу, чтобы он был ниже полногоtextFormField. Как я могу это сделать? Спасибо. Вид: imgur.com/a/K9uV34X Код: codepen.io/speedev/pen/popyJxz