FleatherField cursor goes behind the keyboard when typing #462
Description
When using FleatherField in a SingleChildScrollView, the cursor consistently goes behind the keyboard as you type, making it difficult to see what you're typing. The view does not automatically scroll to bring the focused FleatherField into view when the cursor moves downwards. This issue happens every time you type, not just when the keyboard appears.
I even tried using the scrollController and scrollable settings, but the behavior is still the same.
Steps to Reproduce
- Add multiple FleatherField widgets inside a SingleChildScrollView.
- Focus on any FleatherField to bring up the keyboard.
- Start typing, and observe that as the cursor moves downward, it gets covered by the keyboard and is no longer visible.
Environment
- iOS
- Flutter version 3.24.4
- Fleather 1.19.0
Code
import 'package:fleather/fleather.dart';
import 'package:flutter/material.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(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class Section {
final fleatherController = FleatherController();
Section();
}
class _MyHomePageState extends State<MyHomePage> {
final _scrollController = ScrollController();
final _sections = <Section>[
for (int i = 0; i < 20; i++) Section(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: SingleChildScrollView(
controller: _scrollController,
child: SizedBox(
width: double.maxFinite,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
for (final section in _sections) ...[
const Text(
"TITLE",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
const Text("Input:", style: TextStyle(fontSize: 20)),
FleatherField(
//scrollController: _scrollController,
//scrollable: false,
autofocus: true,
showCursor: true,
autocorrect: false,
enableSuggestions: false,
controller: section.fleatherController,
)
]
],
),
),
),
);
}
}