Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Help/Problem] Beamer key causing issues on keyboard #641

Open
Retr0sec7 opened this issue Oct 6, 2023 · 0 comments
Open

[Help/Problem] Beamer key causing issues on keyboard #641

Retr0sec7 opened this issue Oct 6, 2023 · 0 comments

Comments

@Retr0sec7
Copy link

Retr0sec7 commented Oct 6, 2023

I'm using a Nested Navigation in my home screen. I'm currently having an issue with the creation of the beamers keys which affect the bevior of the digitial keyboward. As this stackoverflow post suggests, this keys are restarting themselves, making it the keyboard to behave the following way:

Keyboard.beamer.issue.1.mp4

This is happening in all inputs inside my home view, which are quite some. Some of the solutions in that stackoverflow posts suggests to create the beamer key as static or/and place it the state of a statefulwidget (which is undesired to me but if it's required i would take the solution), this solves the issue of the beamerkey recreating itself and keyboard is fixed as well:

Beamerkey.issue.1.mp4

However, as you can see, the beamer key looses it state and route information. I tried to follow this beamer example but I hit this wall.

Notes:

  • As I'm currently working with BLOC pattern you will se cubits related stuff, and also stuff missing from the example as I was not sure if their were required with bloc, an example of this is @dispose and @initstate methods

  • Each of this has it's own cubit and state in a separate class/file (cubits are classes that handles all ui events logic and emit a new state to the ui).

  • There are more beamer keys created inside ManagementLocation

Here's my Home Page:

class MobileHomeView extends StatelessWidget {
  MobileHomeView(
      {Key? key, required this.userRole, required this.routeInformation})
      : super(key: key);
  final UserRole userRole;
  final RouteInformation routeInformation;

  static final GlobalKey<ScaffoldState> _scaffoldKey =
      GlobalKey<ScaffoldState>();
  
  //This solves the issue, but beamkey looses it's rpute information
  static final beamerKey = GlobalKey<BeamerState>();


  Maintains route information but key keeps recreating. It's the same if I move the key inside the build method
  // final beamerKey = GlobalKey<BeamerState>();


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      endDrawer: HomeDrawer(homeContext: context),
      appBar: AppBar(
          title: Row(
            children: [
              Image.asset(
                'assets/images/IconMoyaIntro.png',
                width: 40,
                height: 40,
              ),
              const SizedBox(
                width: 12,
              ),
              const Text('Mercaditos', style: TextStyle(fontSize: 20)),
            ],
          ),
          centerTitle: true,
          backgroundColor: Theme.of(context).primaryColor,
          actions: [
            context.watch<AppBloc>().state.userDocument!.profilePicUrl!.isEmpty
                ? Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: InkWell(
                      onTap: () {
                        _scaffoldKey.currentState!.openEndDrawer();
                      },
                      child: const CircleAvatar(
                          foregroundImage: AssetImage("assets/userIcon.png")),
                    ),
                  )
                : Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: InkWell(
                      onTap: () {
                        _scaffoldKey.currentState!.openEndDrawer();
                      },
                      child: CircleAvatar(
                          foregroundImage: NetworkImage(
                              '${context.watch<AppBloc>().state.userDocument!.profilePicUrl}')),
                    ),
                  ),
            const SizedBox(
              width: 10,
            ),
          ],
          elevation: 0),
      body: Beamer(
        key: beamerKey,
        routerDelegate: BeamerDelegate(
          locationBuilder: (routeInformation, _) {
            switch (userRole) {
              case UserRole.cashier:
                if (routeInformation.location!.contains('history')) {
                  return CashierHistoryLocation(routeInformation);
                }
                if (routeInformation.location!.contains('orders')) {
                  return CashierOrdersLocation(routeInformation);
                }
                return CatalogLocation(routeInformation);
              default:
                if (routeInformation.location!.contains('tickets')) {
                  return TicketsLocation(routeInformation);
                }
                if (routeInformation.location!.contains('movements')) {
                  return MovementsLocation(routeInformation);
                }
                if (routeInformation.location!.contains('orders')) {
                  return OrdersLocation(routeInformation);
                }
                return ManagementLocation(routeInformation);
            }
          },
        ),
      ),
      bottomNavigationBar: MobileHomeNavigationBar(
        location: routeInformation.location!,
        beamerKey: beamerKey,
        homeContext: context, // este context no se pasa
        userRole: userRole,
      ),
    );
  }
}


In case needed, the bottom sheet form:

class CreateCategoryFormDialog extends StatelessWidget {
  const CreateCategoryFormDialog({
    Key? key,
    required this.webHomeContext,
  }) : super(key: key);
  final BuildContext webHomeContext;

  @override
  Widget build(BuildContext context) {
    final TextEditingController categoryNameTextFieldController =
        TextEditingController();
    final TextEditingController categoryParentIdTextFieldController =
        TextEditingController();

    return BlocBuilder<AddCategoriesDialogCubit, AddCategoriesDialogState>(
      builder: (context, state) {
        return Dialog(
          backgroundColor: Theme.of(context).colorScheme.onPrimaryContainer,
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
          child: SizedBox(
            width: 465,
            height: 505,
            child: Padding(
              padding:
                  const EdgeInsets.symmetric(horizontal: 4.0, vertical: 6.0),
              child: SingleChildScrollView(
                physics: const RangeMaintainingScrollPhysics(),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        const Spacer(),
                        _CloseIconButton(addCategoriesDialogContext: context)
                      ],
                    ),
                    Align(
                      alignment: Alignment.center,
                      child: SizedBox(
                        height: 75,
                        width: 75,
                        child: Icon(Icons.addchart_rounded,
                            size: 75,
                            color: Theme.of(context).colorScheme.onPrimary),
                      ),
                    ),
                    Align(
                      alignment: Alignment.center,
                      child: Padding(
                          padding: const EdgeInsets.symmetric(vertical: 15.0),
                          child: Text(
                            LocaleKeys.createCategoryTitleForAddModal.tr(),
                            style: TextStyle(
                                fontSize: 25,
                                color: Theme.of(context).colorScheme.onPrimary,
                                fontWeight: FontWeight.w600),
                          )),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(
                          left: 20.0, right: 20.0, bottom: 15.0),
                      child: SizedBox(
                        width: 415,
                        child: _NameTextField(
                            addCategoriesDialogContext: context,
                            categoryNameTextFieldController:
                                categoryNameTextFieldController),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 20.0),
                      child: SizedBox(
                        height: 85,
                        child: Column(
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Text(LocaleKeys.parentCategory.tr(),
                                    style: TextStyle(
                                        color: Theme.of(context)
                                            .colorScheme
                                            .onPrimary,
                                        fontSize: 15,
                                        fontWeight: FontWeight.w600)),
                                Padding(
                                  padding: const EdgeInsets.only(
                                      left: 6.0, right: 6.0),
                                  child: _CategoryParentCheckbox(
                                      addCategoriesDialogContext: context,
                                      categoryParentIdTextFieldController:
                                          categoryParentIdTextFieldController),
                                ),
                                _CategoriesDropDown(
                                  addCategoriesDialogContext: context,
                                  categoryParentIdTextFieldController:
                                      categoryParentIdTextFieldController,
                                  categoryParent: null,
                                ),
                              ],
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: [
                                Row(
                                  children: [
                                    Container(
                                        width: ResponsiveValue(context,
                                            defaultValue: 155.0,
                                            conditionalValues: [
                                          const Condition.smallerThan(
                                              breakpoint: 1200, value: 180.0),
                                          const Condition.equals(
                                              name: 'TABLET', value: 180.0),
                                          const Condition.smallerThan(
                                              name: 'DESKTOP', value: 170.0),
                                        ]).value!),
                                  ],
                                ),
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: [
                                    Padding(
                                      padding:
                                          const EdgeInsets.only(bottom: 2.0),
                                      child: _ErrorTextParentCategoryUnselected(
                                          addCategoriesDialogContext: context,
                                          categoryParentIdTextFieldController:
                                              categoryParentIdTextFieldController),
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ),
                    Row(
                      children: [
                        Padding(
                          padding:
                              const EdgeInsets.only(left: 20.0, right: 2.0),
                          child: Text(LocaleKeys.active.tr(),
                              style: TextStyle(
                                  color:
                                      Theme.of(context).colorScheme.onPrimary,
                                  fontSize: 15,
                                  fontWeight: FontWeight.w600)),
                        ),
                        _SwitchButton(addCategoriesDialogContext: context)
                      ],
                    ),
                    _AddButton(
                      addCategoriesDialogContext: context,
                      categoryParentIdTextFieldController:
                          categoryParentIdTextFieldController,
                      webHomeContext: webHomeContext,
                    )
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant