Flutter: keyboard disappears immediately when focus on TextField

Question

When I click on the text field to start writing, the text field appears and disappears immediately. I tried to remove the ScreenUtil widgets and it's worked but I also tried to replace the GoRouter with on generate route by removing the ScreenUtils widget and it also worked. but I need this ScreenUtils widget in order to implement responsive app

Thi is my code

main.dart:

import 'package:bloc/bloc.dart';
import 'package:elcampione/presentation/app.dart';
import 'package:elcampione/presentation/bloc_observer.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'data/repositories/repositories.dart';
import 'firebase_options.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // Prevent screen from rotating
  SystemChrome.setPreferredOrientations(
      [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);

  Bloc.observer = AppBlocObserver();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  final authenticationRepository = AuthenticationRepository();

  await authenticationRepository.user.first;

  runApp(App(authenticationRepository: authenticationRepository));
}

app.dart:

import 'package:elcampione/blocs/auth/auth_bloc.dart';
import 'package:elcampione/presentation/themes/theme.dart';
import 'package:elcampione/routes/routes.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../data/repositories/repositories.dart';

class App extends StatelessWidget {
  const App({
    super.key,
    required AuthenticationRepository authenticationRepository,
  }) : _authenticationRepository = authenticationRepository;


  final AuthenticationRepository _authenticationRepository;

  @override
  Widget build(BuildContext context) {
    return RepositoryProvider<AuthenticationRepository>(
      create: (context) => _authenticationRepository,
      child: BlocProvider(
        create: (_) => AuthBloc(
          authenticationRepository: _authenticationRepository,
        ),
        child: const AppView(),
      ),
    );
  }
}

class AppView extends StatelessWidget {
  const AppView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final state = context.select((AuthBloc bloc) => bloc.state.status);
    final isAuthenticated = state == AuthStatus.authenticated;
    return ScreenUtilInit(
      builder: (context, child) => MaterialApp.router(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(useMaterial3: true, colorScheme: darkColorScheme),
        darkTheme: ThemeData(useMaterial3: true, colorScheme: darkColorScheme),
        title: 'El Campione',
        locale: const Locale('en'),
        routerConfig: AppRouter.router(isAuthenticated),
      ),
      designSize: const Size(390, 844),
    );
  }
}

app_route_config.dart:

import 'package:elcampione/presentation/screens/screens.dart';
import 'package:elcampione/routes/app_route_constants.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

class AppRouter {
  static GoRouter router(bool isAuthenticated) {
    GoRouter routes = GoRouter(
      initialLocation: isAuthenticated ? '/home' : '/signin',
      routes: [
        GoRoute(
          name: AppRoutesConstants.home,
          path: '/home',
          builder: (context, state) => const HomeScreen(),
        ),
        GoRoute(
          name: AppRoutesConstants.signIn,
          path: '/signin',
          builder: (context, state) => const SignInScreen(),
        ),
        GoRoute(
          name: AppRoutesConstants.signUp,
          path: '/signup',
          builder: (context, state) => const SignUpScreen(),
        )
      ],
      redirect: (context, state) => !isAuthenticated ? '/signin' : null,
    );
    return routes;
  }
}

score 0 · Answer 1 · answered Aug 11 '23 at 19:07

0

Without seeing more code I suggest using StatefulWidget instead of StatelessWidget.

I am afraid what is happening here is double rendering. Where keyboard disappears because it loses the focus.

Also, check the logs - there might be an error (perhaps) as there is async mixed with blocking synchronous calls.

answered Aug 11 '23 at 19:07

Margus Rebane

1
1

I'm using BLOC as a state management so I don't need to use StatefulWidget cause the widget will rebuild again if any changes happen. also, there are no logs errors, that's the problem – Montassar Zaroui Aug 11 '23 at 21:52
Ok. I see you have three routes. I assume the text input which appears and disappears is in home and you get signed out and rerouted to sign in? – Margus Rebane Aug 12 '23 at 02:34
Check if authentication repository changes user after initial rendering. I assume initial value is authenticated but after the rendering it gets not authenticated status. – Margus Rebane Aug 12 '23 at 02:59
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 15 '23 at 07:59
Has anyone figured out a solution i am experiencing the same issue – Steve Mimshak Aug 27 '23 at 09:23

score 0 · Answer 2 · answered Aug 27 '23 at 09:36

The TextFormField rebuilds when when the keyboard comes up so by the time the keyboard opens the actual TextFormField that requested the keyboard is no longer available so it closes immediately

you can solve this by using a global key like so

Form(
    key: RouteHelper.myFormKey,
    child: Column(
        children: [
          TextFormField(
            initialValue: "1",
          )
      ]
    )
);

Then you can create the global key statically in a class somewhere like so

static final GlobalKey<FormState> myFormKey = GlobalKey<FormState>();

Flutter: keyboard disappears immediately when focus on TextField

2 Answers2