Im developing for flutter desktop and am having issues as pressing the tab key doesnt cycle through the text fields when the app screen is not maximised.
I have 8 Textfields arranged in a Gridview and when the app screen is maximised the tab key moves through the fields as expected, left to right then down. When I reduce the screen size the tab key only cycles 2 fields in a continuous loop. How can I get this working properly? Code as shown:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text("Test App"),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child:Container(
height: 180,
// width: MediaQuery.of(context).size.width * 0.9,
child: GridView.count(
scrollDirection: Axis.vertical,
crossAxisCount: 4,
childAspectRatio: 5,
children: [
buildColumn(context,txt: "A"),
buildColumn(context,txt: "B"),
buildColumn(context,txt: "C"),
buildColumn(context,txt: "D"),
buildColumn(context,txt: "E"),
buildColumn(context,txt: "F"),
buildColumn(context,txt: "G"),
buildColumn(context,txt: "H"),
])
)
)
);
}
Column buildColumn(BuildContext context,{txt}) {
return Column(children: [
Text(txt),
Container(
height: MediaQuery.of(context).size.height * 0.04,
width: 300,
child:TextFormField(decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.black12, width: 1.0),
),),)
),
]
);
}
}
