modal_bottom_sheet
modal_bottom_sheet copied to clipboard
Published
20 hours ago •
jamesblasco
jamesblasco
The whole page will rebuild when softkeyboard were lay down on CupertinoTextField
Hi, I have a stateless page, every time the sotfkeyboard lay down after finish text filed input, the whole page will rebuild.
And the text just input will gone. I just want to know why this behavior will happen since textfield should be normal just like normal page right? I almost face this issue in every single page when I using showBottomSheet to transition that page.
It's very very much appreciated it anyone could shine a light on me on this puzzle, this is really annoying, if anyone could teach me how to resolve it, that would save my life.
Which version of the package are you using?
Does using a TextEditingController with a Textfield inside a StatefulController solves your problem?
@jamesblasco latest, My currently solution is using bloc to save text in onChange , but the rebuild problem still exist. I don't why. (using TextEdittingController to set text manually when it rebuilds).
Okey, I will take a look at the issue. If you have some reproducible code of the issue it will easier for me to find the problem
@jamesblasco I am not have full app code, but I can paste my show page code here:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_app/bloc/bloc_provider.dart';
import 'package:flutter_app/models/user.dart';
import 'package:flutter_app/pages/projects/project.dart';
import 'package:flutter_app/pages/projects/project_bloc.dart';
import 'package:flutter_app/pages/tasks/bloc/adduser2task_bloc.dart';
import 'package:flutter_app/utils/app_constant.dart';
import 'package:flutter_app/utils/app_util.dart';
import 'package:flutter_app/utils/color_utils.dart';
import 'package:flutter_custom_dialog/flutter_custom_dialog.dart';
import 'package:flutter_icons/flutter_icons.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_svprogresshud/flutter_svprogresshud.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:url_launcher/url_launcher.dart';
class AddProjectPanel extends StatefulWidget {
final ProjectBloc bloc;
AddProjectPanel(this.bloc);
@override
_AddProjectPanelState createState() => _AddProjectPanelState();
}
class _AddProjectPanelState extends State<AddProjectPanel> {
TextEditingController _controller = new TextEditingController();
TextEditingController _descController = new TextEditingController();
@override
Widget build(BuildContext context) {
if (widget.bloc.crtProject != null) {
print(
'crtProject not null... set title: ${widget.bloc.title}, des: ${widget.bloc.des}');
_controller.text = widget.bloc.title;
_controller.selection = TextSelection.fromPosition(
TextPosition(offset: _controller.text.length));
if (widget.bloc.des != null) {
_descController.text = widget.bloc.des;
_descController.selection = TextSelection.fromPosition(
TextPosition(offset: _descController.text.length));
}
}
return Scaffold(
appBar: appBar(context),
body: CupertinoPageScaffold(
child: ListView(padding: EdgeInsets.all(16), children: [
SizedBox(height: 32),
Row(
children: [
IconButton(
icon: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: Theme.of(context).scaffoldBackgroundColor,
borderRadius: BorderRadius.circular(36),
// shape: BoxShape.,
boxShadow: [
BoxShadow(
blurRadius: 2,
color: Theme.of(context)
.unselectedWidgetColor
.withAlpha(20))
]),
padding: EdgeInsets.symmetric(horizontal: 0, vertical: 0),
child: StreamBuilder(
stream: widget.bloc.selectedEmoji,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Center(
child: Text(
snapshot.data,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25,
),
));
} else {
return Icon(
FlutterIcons.sticker_emoji_mco,
size: 15,
color: Colors.grey.withAlpha(50),
);
}
},
)),
onPressed: () {
},
),
IconButton(
icon: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: Theme.of(context).scaffoldBackgroundColor,
borderRadius: BorderRadius.circular(36),
// shape: BoxShape.,
boxShadow: [
BoxShadow(
blurRadius: 2,
color: Theme.of(context)
.unselectedWidgetColor
.withAlpha(20))
]),
padding: EdgeInsets.symmetric(horizontal: 0, vertical: 0),
child: StreamBuilder(
stream: widget.bloc.selectedPalette,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Container(
width: 60.0,
height: 60.0,
child: CircleAvatar(
backgroundColor: Color(snapshot.data.colorValue),
),
);
} else {
return Icon(
FlutterIcons.ios_color_palette_ion,
size: 15,
color: Colors.grey.withAlpha(50),
);
}
},
)),
onPressed: () {
},
),
SizedBox(
width: 8,
),
Expanded(
child: Column(
children: [
CupertinoTextField(
controller: _controller,
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey.withAlpha(30), width: 0.5),
color: Colors.grey.withAlpha(30),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular((8.0)),
),
placeholder: "项目名称",
placeholderStyle: NORMAL_TXT_STYLE.copyWith(
color: Colors.grey.withAlpha(60)),
textInputAction: TextInputAction.search,
style: NORMAL_TXT_STYLE,
onChanged: (v) {
widget.bloc.title = _controller.text;
var _n = widget.bloc.crtProject.name;
widget.bloc.crtProject.name =
getProjectNameFirstName(_n) + ' ' + _controller.text;
},
// onSubmitted: (v) {
// print('开始搜索');
// _projectBloc.title = v;
// },
),
SizedBox(
height: 8,
),
CupertinoTextField(
controller: _descController,
maxLines: 3,
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey.withAlpha(30), width: 0.5),
color: Colors.grey.withAlpha(30),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular((8.0)),
),
placeholder:
"详情, 可为空, 这个项目是关于什么的? 比如: 关于吃饭，睡觉，短期成就，新年Flags之类的",
placeholderStyle: NORMAL_TXT_STYLE.copyWith(
color: Colors.grey.withAlpha(60)),
textInputAction: TextInputAction.done,
style: NORMAL_TXT_STYLE,
onChanged: (v) {
widget.bloc.des = _descController.text;
widget.bloc.crtProject.desc = _descController.text;
},
onSubmitted: (v) {
print('开始搜索');
// _projectBloc.des = v;
},
),
],
))
],
),
SizedBox(height: 32),
Container(
height: 200,
child: SvgPicture.asset(
"assets/illustrations/undraw_happy_news_hxmt.svg"),
),
SizedBox(height: 32),
CupertinoButton(
color: Colors.blueAccent,
child: Text('保存并创建', style: NORMAL_BOLD_TXT_STYLE),
onPressed: () {
// Project project = Project.create(_projectBloc.title,
// , colorName, desc, createTime);
if (widget.bloc.emoji == null) {
showToast(context, "请设置表情图标");
} else if (widget.bloc.color == null) {
showToast(context, "请设置颜色");
} else {
widget.bloc.saveProject().listen((value) {
SVProgressHUD.setDefaultStyle(SVProgressHUDStyle.light);
if (widget.bloc.crtProject != null) {
SVProgressHUD.showSuccess(status: "修改成功");
} else {
SVProgressHUD.showSuccess(status: "新建成功");
}
Navigator.of(context).pop();
Future.delayed(Duration(seconds: 1)).then((value) {
SVProgressHUD.dismiss();
});
});
}
}),
SizedBox(
height: 32,
),
])));
}
PreferredSizeWidget appBar(BuildContext context) {
return CupertinoNavigationBar(
backgroundColor: Colors.transparent,
border: Border(bottom: BorderSide(color: Colors.transparent)),
leading: CupertinoButton(
padding: EdgeInsets.all(0),
child: Text(
'取消',
style: NORMAL_BOLD_TXT_STYLE.copyWith(color: Colors.blueAccent),
),
onPressed: () {
Navigator.of(context).pop();
},
),
automaticallyImplyLeading: false,
middle: Text('创建项目',
style: NORMAL_BOLD_TXT_STYLE.copyWith(color: Colors.blueAccent)),
trailing: CupertinoButton(
padding: EdgeInsets.all(0),
child: Text(
'完成',
style: NORMAL_BOLD_TXT_STYLE.copyWith(color: Colors.blueAccent),
),
onPressed: () {
Navigator.of(context).pop();
},
));
}
}
Well, as you can see this I can't reproduce this code. Try to make a small example of the issue that I can reproduce.
@jamesblasco thanks, I will try write a single and simple snippet to replicat.