bottomNavigationBar和floatingActionButton被顶起 #111334

Closed

Closed

bottomNavigationBar和floatingActionButton被顶起#111334

Labels

opened

on Sep 10, 2022

当我在使用flutter3.0以上版本时发现，当输入框聚焦后，bottomNavigationBar和floatingActionButton会被软键盘顶起，哪怕设置了 resizeToAvoidBottomInset: false也无效。这样的体检不太友好。请问有什么解决办法吗？

added

on Sep 12, 2022

Member

"When I was using flutter 3.0 and above, I found that when the input box is focused, bottomNavigationBar and floatingActionButton will be pushed up by the soft keyboard, even if resizeToAvoidBottomInset: false is set, it is invalid. Such a checkup is not very friendly. Is there any solution please?" - Google Translate

Hi @shijia2118
I can not reproduce the issue with below sample code. When setting resizeToAvoidBottomInset: false, the bottomNavigationBar and floatingActionButton are not pushed up by the keyboard.

Sample code

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
  TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static List<Widget> _widgetOptions = <Widget>[
    Column(
      children: [
        Text(
          'Index 0: Home',
          style: optionStyle,
        ),
        TextField(),
      ],
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {

        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Demo

XRecorder_12092022_132746.mp4

Please provide a completed and minimal reproducible code sample so that we may verify this. Also, please provide the output of flutter doctor -v as well.

Thank you!

added

waiting for customer response

on Sep 12, 2022

@huycozy
I had a similar issue, when using CupertinoTabScaffold
resizeToAvoidBottomInset: false is not work

code


  var viewList = new List<int>.generate(100, (i) => i + 1);
  List<String> items = [
    'Item1',
    'Item2',
    'Item3',
    'Item4',
    'Item5',
    'Item6',
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(items: [
          BottomNavigationBarItem(icon: Icon(Icons.abc_outlined)),
          BottomNavigationBarItem(icon: Icon(Icons.abc_outlined))
        ], onTap: (index) {}),
        tabBuilder: (context, index) {
          return CupertinoTabView(builder: (context) {
            return Scaffold(
              appBar: AppBar(),
              resizeToAvoidBottomInset: false,
              body: LayoutBuilder(builder: (context, constraints) {
                return Column(
                  children: [
                    Container(height: 44, color: Colors.red),
                    Expanded(
                      child: SingleChildScrollView(
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: viewList
                                  .asMap()
                                  .entries
                                  .map((e) => _textFieldView(e.key))
                                  .toList()),
                        ),
                      ),
                    ),
                  ],
                );
              }),
              bottomNavigationBar: SafeArea(
                child: Container(
                  height: 44,
                  color: Colors.red,
                  child: TextButton(
                    child: Text('Button'),
                    onPressed: () {},
                  ),
                ),
              ),
            );
          });
        },
      ),
    );
  }

  Widget _textFieldView(int index) {
    return Container(
      width: double.infinity,
      height: 44,
      padding: EdgeInsets.all(8),
      child: Row(children: [
        Text(index.toString()),
        Expanded(child: TextField(focusNode: FocusNode())),
      ]),
    );
  }

  void onWhiteSpaceTapped(BuildContext context) {
    final FocusScopeNode scope = FocusScope.of(context);
    if (scope.hasFocus) {
      scope.unfocus();
    }
  }

Member

@SnowZero Try adding resizeToAvoidBottomInset: false property into CupertinoTabScaffold will help to solve your issue.

github-actionsbot

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now.
If you find this problem please file a new issue with the same description, what happens, logs and the output of 'flutter doctor -v'. All system setups can be slightly different so it's always better to open new issues and reference the related ones.
Thanks for your contribution.

closed this as completed

on Oct 10, 2022

added

and removed

waiting for customer response

on Oct 10, 2022

github-actionsbot

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

locked as resolved and limited conversation to collaborators

on Oct 24, 2022

to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Participants