I have a dialog with long content and many TextFields - at the top, middle and bottom. This is my test code
import 'package:flutter/material.dart';
class TempDialog extends StatefulWidget {
TempDialog({Key? key}) : super(key: key);
@override
State<TempDialog> createState() => _TempDialogState();
}
class _TempDialogState extends State<TempDialog> {
@override
Widget build(BuildContext context) {
var textController = TextEditingController(text: "");
var height = MediaQuery.of(context).size.height;
var width = MediaQuery.of(context).size.width;
return AlertDialog(
content: Container(
width: width,
height: height,
child: Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
TextField(
textAlign: TextAlign.left,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
fillColor: Colors.green,
filled: true
),
keyboardType: TextInputType.multiline,
maxLines: null,
minLines: 2,
controller: textController,
),
SizedBox(height: 500,),
TextField(
textAlign: TextAlign.left,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
fillColor: Colors.red,
filled: true
),
keyboardType: TextInputType.multiline,
maxLines: null,
minLines: 2,
controller: textController,
),
],
),
),
),
),
);
}
}
class TempScreen extends StatefulWidget {
TempScreen({Key? key}) : super(key: key);
@override
State<TempScreen> createState() => _TempScreenState();
}
class _TempScreenState extends State<TempScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Temp screen"),
),
body: Column(
children: [
TextButton(
onPressed: (){
showDialog(
context: context,
builder: (BuildContext context) {
return TempDialog();
}
);
},
child: Text("Tap me"))
],
),
);
}
}
And this is the result:
As you see TextField that is at the bottom is not visible on focus - scrollview doesnt scroll to its position.
Could anyone say how to fix this issue. Please, note, that solution needs to support multiple TextFields (as I've said I have many of them).
EDIT 1
I tried to use scrollable positioned list. This is my code
import 'package:flutter/material.dart';
import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
class TempDialog extends StatefulWidget {
TempDialog({Key? key}) : super(key: key);
@override
State<TempDialog> createState() => _TempDialogState();
}
class _TempDialogState extends State<TempDialog> {
final ItemScrollController itemScrollController = ItemScrollController();
final ItemPositionsListener itemPositionsListener = ItemPositionsListener.create();
@override
Widget build(BuildContext context) {
return AlertDialog(
content: Container(
width: 300,
height: 500,
child: ScrollablePositionedList.builder(
padding: EdgeInsets.only(top: 10),
itemCount: 2,
physics: ClampingScrollPhysics(),
itemBuilder: (context, index) {
return Focus(
child: Padding(
padding: EdgeInsets.only(bottom: 500),
child: TextField(
key: ValueKey("_k" + index.toString()),
textAlign: TextAlign.left,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
fillColor: Colors.red,
filled: true
),
keyboardType: TextInputType.multiline,
maxLines: null,
minLines: 2,
//controller: textController,
),
),
onFocusChange: (hasFocus) {
if (hasFocus) {
// itemScrollController.jumpTo(index: index);
itemScrollController.scrollTo(
index: index,
duration: Duration(seconds: 2),
curve: Curves.easeInOutCubic);
}
} ,
);
},
itemScrollController: itemScrollController,
itemPositionsListener: itemPositionsListener,
),
),
);
}
}
class TempScreen extends StatefulWidget {
TempScreen({Key? key}) : super(key: key);
@override
State<TempScreen> createState() => _TempScreenState();
}
class _TempScreenState extends State<TempScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Temp screen"),
),
body: Column(
children: [
TextButton(
onPressed: (){
showDialog(
context: context,
builder: (BuildContext context) {
return TempDialog();
}
);
},
child: Text("Tap me"))
],
),
);
}
}
and this is the result:
As you see the problem is that when keyboard is shown it doesn't scroll to focused item.
