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

on 3.10.0 use flutter screenutil, when I open keyboard ,bottomsheet not build, and keyboard Obscure bottomsheet #477

Closed
kevin-lemon opened this issue May 12, 2023 · 16 comments

Comments

@kevin-lemon
Copy link

kevin-lemon commented May 12, 2023

can try this code with flutter 3.10.0 and flutter_screenutil: 5.8.1

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
        designSize: const Size(375, 812),
        builder: (context, child) {
          return const MaterialApp(
            home: HomePage(),
          );
        });
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Tutorial'),
      ),
      body: Column(
        children: [
          Center(
            child: ElevatedButton(
              onPressed: () {
                showModalBottomSheet(
                  context: context,
                  builder: (context){
                    return Padding(
                      padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
                      child: const SizedBox(height: 200, child: TextField()),
                    );
                  },
                );
              },
              child: const Text(
                'showModalBottomSheet',
              ),
            ),
          ),
        ],
      ),
    );
  }

}

image
I test only use flutter screenutil can happend

就是当我用这个插件的时候(5.8.1最新版和5.7.0以前用的都尝试了),在3.7.11版本的flutter,是完全没问题的,但是当我升级flutter到3.10.0时,打开键盘不会触发bottomsheet的build了,导致页面无法移动被遮挡,在3.7.11是触发的,不止是bottomsheet,其他的带输入框页面似乎也有这个问题。

当使用方式二加载时不会有这个问题:
void main() async {
// Add this line
await ScreenUtil.ensureScreenSize();
runApp(MyApp());
}
...
MaterialApp(
...
builder: (ctx, child) {
ScreenUtil.init(ctx);
return Theme(
data: ThemeData(
primarySwatch: Colors.blue,
textTheme: TextTheme(bodyText2: TextStyle(fontSize: 30.sp)),
),
child: HomePage(title: 'FlutterScreenUtil Demo'),
);
},
)

@naivetoby
Copy link
Contributor

me too,哈哈哈

@kevin-lemon
Copy link
Author

me too,哈哈哈

我试了下,用方式二加载可以,不包裹

当使用方式二加载时不会有这个问题:
void main() async {
// Add this line
await ScreenUtil.ensureScreenSize();
runApp(MyApp());
}
...
MaterialApp(
...
builder: (ctx, child) {
ScreenUtil.init(ctx);
return Theme(
data: ThemeData(
primarySwatch: Colors.blue,
textTheme: TextTheme(bodyText2: TextStyle(fontSize: 30.sp)),
),
child: HomePage(title: 'FlutterScreenUtil Demo'),
);
},
)

@naivetoby
Copy link
Contributor

useInheritedMediaQuery: true

这样也可以,但是会造成父组件不断的 rebuild

@kevin-lemon
Copy link
Author

useInheritedMediaQuery: true

这样也可以,但是会造成父组件不断的 rebuild

不断rebuild也很头疼,我直接不包了,反正只是用到了计算下dp

@naivetoby
Copy link
Contributor

useInheritedMediaQuery: true
这样也可以,但是会造成父组件不断的 rebuild

不断rebuild也很头疼,我直接不包了,反正只是用到了计算下dp

仔细看看源码,方法二相当于 useInheritedMediaQuery: true

@kevin-lemon
Copy link
Author

useInheritedMediaQuery: true
这样也可以,但是会造成父组件不断的 rebuild

不断rebuild也很头疼,我直接不包了,反正只是用到了计算下dp

仔细看看源码,方法二相当于 useInheritedMediaQuery: true

那这个无解了?

@lizhuoyuan
Copy link
Collaborator

lizhuoyuan commented May 15, 2023

我运行了一下demo , 输入框在底部的时候 是会弹起到键盘上方的啊
原来是bottomSheet, 试了一下 确实没有弹起 .
可以先参考一下这个写法:

showModalBottomSheet<void>(
                        context: context,
                        builder: (BuildContext context) {
                          return Container(
                            height: 200.w +
                                MediaQuery.of(context).viewInsets.bottom,
                            color: Colors.amber,
                            child: Center(
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                mainAxisSize: MainAxisSize.min,
                                children: <Widget>[
                                  const Text('Modal BottomSheet'),
                                  Spacer(),
                                  TextField(),
                                  ElevatedButton(
                                    child: const Text('Close BottomSheet'),
                                    onPressed: Navigator.of(context).pop,
                                  ),
                                  SizedBox(
                                      height: MediaQuery.of(context)
                                          .viewInsets
                                          .bottom),
                                ],
                              ),
                            ),
                          );
                        },
                      );

不会多次调用build, 也会在弹起键盘时把输入框顶起来

@kevin-lemon
Copy link
Author

我运行了一下demo , 输入框在底部的时候 是会弹起到键盘上方的啊 原来是bottomSheet, 试了一下 确实没有弹起 . 可以先参考一下这个写法:

showModalBottomSheet<void>(
                        context: context,
                        builder: (BuildContext context) {
                          return Container(
                            height: 200.w +
                                MediaQuery.of(context).viewInsets.bottom,
                            color: Colors.amber,
                            child: Center(
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                mainAxisSize: MainAxisSize.min,
                                children: <Widget>[
                                  const Text('Modal BottomSheet'),
                                  Spacer(),
                                  TextField(),
                                  ElevatedButton(
                                    child: const Text('Close BottomSheet'),
                                    onPressed: Navigator.of(context).pop,
                                  ),
                                  SizedBox(
                                      height: MediaQuery.of(context)
                                          .viewInsets
                                          .bottom),
                                ],
                              ),
                            ),
                          );
                        },
                      );

不会多次调用build, 也会在弹起键盘时把输入框顶起来

用我的代码,外面screenutils包裹,我这边必现,在3.10.0的flutter版本

@xiaolongwuhpu
Copy link

+1

@rooney0502
Copy link

flutter/flutter#126585

我是在Flutter的github上面找到这个问题的,我也很奇怪,之前一直没问题,现在就出这种问题,我一开始也是怀疑第三方库,我一个一个试,最后真的试到万念俱灰了,然后就真的试出来了...

@kevin-lemon
Copy link
Author

flutter/flutter#126585

我是在Flutter的github上面找到这个问题的,我也很奇怪,之前一直没问题,现在就出这种问题,我一开始也是怀疑第三方库,我一个一个试,最后真的试到万念俱灰了,然后就真的试出来了...

现在你咋解决了?

@rooney0502
Copy link

flutter/flutter#126585
我是在Flutter的github上面找到这个问题的,我也很奇怪,之前一直没问题,现在就出这种问题,我一开始也是怀疑第三方库,我一个一个试,最后真的试到万念俱灰了,然后就真的试出来了...

现在你咋解决了?

就是用了useInheritedMediaQuery: true就没问题,不过有一个点要注意的是,你要看清楚的inputTextfiled是否嵌在Scaffold,因为Scaffold在默认状态下会帮你自动适配键盘弹起的情况...

@lizhuoyuan
Copy link
Collaborator

很抱歉出现这样的问题,
现在可以先升级到5.8.2, 将useInheritedMediaQuery默认值改为true了

@naivetoby
Copy link
Contributor

很抱歉出现这样的问题, 现在可以先升级到5.8.2, 将useInheritedMediaQuery默认值改为true了

我这边出现只要键盘弹起来,当前所有 UI 视图栈(当前页外面的所有页面)在键盘弹起或者消失的过程中,一直 rebuild 的情况

@Guo8a
Copy link

Guo8a commented May 23, 2023

很抱歉出现这样的问题, 现在可以先升级到5.8.2, 将useInheritedMediaQuery默认值改为true了

请问有解决办法吗?我不需要一直 rebuild。

@naivetoby
Copy link
Contributor

很抱歉出现这样的问题, 现在可以先升级到5.8.2, 将useInheritedMediaQuery默认值改为true了

请问有解决办法吗?我不需要一直 rebuild。

我的项目可以这样解决,你也可以试试,一定记得 useInheritedMediaQuery 设置为 false。

#485

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

6 participants