Flutter vertical scroll inside a horizontal PageView [duplicate] - flutter

Question

This question already has an answer here:
Combine SingleChildScrollView and PageView in Flutter
(1 answer)
Closed 3 years ago.
I added 2 Form widgets to a PageView. Each form has 6 TextFormField. When I tap on the last 2 TextFormField from either Form, the keyboard shows up over the fields and hides them to the user.
I tried using a SingleChildScrollView inside PageView, with no luck.
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
body: PageView(
children: <Widget>[
_sampleForm(),
_sampleForm(),
],
),
)
}
_sampleForm(){
return Container(
margin: const EdgeInsets.fromLTRB(0, 0, 0, 10),
width: MediaQuery.of(context).size.width,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Form(
child: Column(
children: <Widget>[
TextFormField(...),
TextFormField(...),
TextFormField(...),
TextFormField(...),
TextFormField(...),
TextFormField(...),
],
),
),
],
),
),
);
}
What I need is to automatically scroll up when tapping the TextFormFields, and also be able to swipe a PageView horizontally,

Answer 1

try this approach. I have used a ListView instead of [SingleChildScrollView, Column].
Here the code.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: SampleScreen(),
);
}
}
class SampleScreen extends StatefulWidget {
#override
_SampleScreenState createState() => _SampleScreenState();
}
class _SampleScreenState extends State<SampleScreen> {
List<FocusNode> _focusNodes = List.generate(7, (_) => FocusNode());
#override
void dispose() {
_focusNodes.forEach((_) => _.dispose());
super.dispose();
}
setFocus(BuildContext context, {FocusNode focusNode}) {
FocusScope.of(context).requestFocus(focusNode ?? FocusNode());
}
_sampleForm1() {
return Form(
child: ListView(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 10),
children: <Widget>[
TextFormField(
focusNode: _focusNodes[0],
decoration: InputDecoration(labelText: "Flutter 1"),
onFieldSubmitted: (_) => setFocus(context, focusNode: _focusNodes[1]),
textInputAction: TextInputAction.next,
),
TextFormField(
focusNode: _focusNodes[1],
decoration: InputDecoration(labelText: "Flutter 2"),
onFieldSubmitted: (_) => setFocus(context, focusNode: _focusNodes[2]),
textInputAction: TextInputAction.next,
),
TextFormField(
focusNode: _focusNodes[2],
decoration: InputDecoration(labelText: "Flutter 3"),
onFieldSubmitted: (_) => setFocus(context, focusNode: _focusNodes[3]),
textInputAction: TextInputAction.next,
),
TextFormField(
focusNode: _focusNodes[3],
decoration: InputDecoration(labelText: "Flutter 4"),
onFieldSubmitted: (_) => setFocus(context, focusNode: _focusNodes[4]),
textInputAction: TextInputAction.next,
),
TextFormField(
focusNode: _focusNodes[4],
decoration: InputDecoration(labelText: "Flutter 5"),
onFieldSubmitted: (_) => setFocus(context, focusNode: _focusNodes[5]),
textInputAction: TextInputAction.next,
),
TextFormField(
focusNode: _focusNodes[5],
decoration: InputDecoration(labelText: "Flutter 6"),
onFieldSubmitted: (_) => setFocus(context, focusNode: _focusNodes[6]),
textInputAction: TextInputAction.next,
),
TextFormField(
focusNode: _focusNodes[6],
decoration: InputDecoration(labelText: "Flutter 7"),
onFieldSubmitted: (_) => setFocus(context),
textInputAction: TextInputAction.done,
),
],
),
);
}
_sampleForm2() {
return Form(
child: ListView(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 10),
children: <Widget>[
TextFormField(decoration: InputDecoration(labelText: "Flutter 1")),
TextFormField(decoration: InputDecoration(labelText: "Flutter 2")),
TextFormField(decoration: InputDecoration(labelText: "Flutter 3")),
TextFormField(decoration: InputDecoration(labelText: "Flutter 4")),
TextFormField(decoration: InputDecoration(labelText: "Flutter 5")),
TextFormField(decoration: InputDecoration(labelText: "Flutter 6")),
TextFormField(decoration: InputDecoration(labelText: "Flutter 7")),
],
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sample App"),
),
body: PageView(
children: <Widget>[
_sampleForm1(),
_sampleForm2(),
],
),
);
}
}
Hope it helps :)