1 year ago
#380477
Hemant Dixit
Flutter PWA - Canvas going to change after dismiss keyboard
I am facing one strange issue in the flutter progressive web application. It's working well in safari and chrome browsers. It's creating an issue when we add it to the home screen. We are having only two text fields on the page and nothing else. After opening a keyboard and clicking on the done or return button then we tap outside the TextInput area multiple times(5 - 6 times) then the canvas(body) of the page reduces gradually. Please check the attached video for it. Video Link
Please check below code:
import 'package:demo_texfield_web/unfocser.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: TextfieldDemo(),
);
}
}
class TextfieldDemo extends StatefulWidget {
const TextfieldDemo({Key? key}) : super(key: key);
@override
State<TextfieldDemo> createState() => _TextfieldDemoState();
}
class _TextfieldDemoState extends State<TextfieldDemo> {
var txtxField1 = TextEditingController();
var txtxField2 = TextEditingController();
FocusNode _focusNode1 = new FocusNode();
FocusNode _focusNode2 = new FocusNode();
final _formKey = GlobalKey<FormState>();
int count = 0;
@override
void initState(){
super.initState();
_focusNode1.addListener(_focusNodeListener);
}
@override
void dispose(){
_focusNode1.removeListener(_focusNodeListener);
super.dispose();
}
Future<Null> _focusNodeListener() async {
if (_focusNode1.hasFocus){
print('TextField got the focus');
} else {
print('TextField lost the focus');
FocusScope.of(context).unfocus();
}
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
FocusScopeNode currentFocus = FocusScope.of(context);
if(!currentFocus.hasPrimaryFocus) {
currentFocus.focusedChild!.unfocus();
}
},
child: Scaffold(
body:Form(
key: _formKey,
child: Padding(
padding: const EdgeInsets.all(60.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Unfocuser(
child: TextFormField(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
filled: true,
icon: Icon(Icons.person),
hintText: 'Enter your first name',
labelText: 'First name *',
),
onSaved: (String? value) {
//TODO
},
controller: txtxField1,
focusNode: _focusNode1,
),
),
const SizedBox(height: 25,),
Unfocuser(
child: TextFormField(
keyboardType: TextInputType.number,
decoration: const InputDecoration(
border: UnderlineInputBorder(),
filled: true,
icon: const Icon(Icons.person),
hintText: 'Enter your Last name',
labelText: 'Last name *',
),
onSaved: (String? value) {
//TODO
},
controller: txtxField2,
focusNode: _focusNode2,
),
),
],
),
),
),
),
);
}
}
flutter
dart
progressive-web-apps
0 Answers
Your Answer