1 year ago

#380477

test-img

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

Accepted video resources