I have an issue with modal bottom sheet.
After I use Navigator.push to another page, the modal bottom sheet remain there when I go back.
I already try using FocusScope.of(context).focusedChild.unfocus(); and Navigator.pop(context); still not helping.
Modal bottom sheet code:
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blueAccent,
child: Icon(
Icons.add,
color: Colors.white,
),
onPressed: () {
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
context: context,
isScrollControlled: true,
builder: (context) => SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: AddTask(), //open statefull widget
),
),
);
}),
Add Task code:
Row(
children: <Widget>[
InkWell(
borderRadius: BorderRadius.circular(8),
onTap: () async {
FocusScope.of(context).focusedChild.unfocus();
await DatabaseService(uid: user.uid, taskId: taskId)
.updateTask(false, _titleValue, _notesValue,
UpdateChecklist().checklistInput, '', '', '');
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TaskDetail(
uid: user.uid,
taskId: taskId,
)),
);
},
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent),
borderRadius: BorderRadius.circular(8)),
child: Icon(
Icons.add,
color: Colors.blueAccent,
),
),
),
is there any way to make the modal bottom sheet go back to unfocus when I return to the page?
it solved by adding then.
Row(
children: <Widget>[
InkWell(
borderRadius: BorderRadius.circular(8),
onTap: () async {
await DatabaseService(uid: user.uid, taskId: taskId)
.updateTask(false, _titleValue, _notesValue,
UpdateChecklist().checklistInput, '', '', '');
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TaskDetail(
uid: user.uid,
taskId: taskId,
)),
).then((value) => Navigator.pop(context));
closing showModalBottomSheet programmatically is done via
Navigator.pop(context);
Related
I'm making a learning app that has 2 buttons
1: Lead you directly learning dashboard
2: The login & signup
The start learning button work fine,
the problem with the login button
When I clicked nothing
happed
there are no errors in my code, but the button is not working, and I don't know why
The code for login button:
//------------------------------------------------------------------------------
// Start Learning Button..
//------------------------------------------------------------------------------
Container(
padding: const EdgeInsets.all(18),
margin: const EdgeInsets.all(20),
width: double.infinity,
decoration: BoxDecoration(
gradient: const LinearGradient(colors: [
Color.fromARGB(255, 240, 142, 14),
Color.fromARGB(255, 250, 185, 88),
], begin: Alignment.centerLeft, end: Alignment.centerRight),
boxShadow: [
BoxShadow(
color: AppColor.accentColor.withOpacity(0.3),
spreadRadius: 4,
blurRadius: 8,
offset: const Offset(0, 0),
),
],
borderRadius: BorderRadius.circular(12),
),
//------------------------------------------------
// boutton input
child: GestureDetector(
child: Text(
'Start Learning',
style: AppFont.bigText,
textAlign: TextAlign.center,
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const selectLanguagScreen()),
);
},
),
),
//------------------------------------------------------------------------------
// Login - signup
//--------------------------------------------------------------------------------
TextButton(
onPressed: () {
print('hello');
MaterialPageRoute(
builder: (context) => const loginScreen());
},
child: Text(
'login-Sing up',
style: AppFont.bigText.copyWith(
color: Colors.orange,
decoration: TextDecoration.underline),
),
),
This is how it looks:
This what the DEBUG CONSOLE shows
Appreciate if someone can advise. Thank you in advance!
You need to use Navigator.of(context).push to go new route
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => const loginScreen()));
More about navigation
use this:
Navigator.push(context, MaterialPageRoute(builder: (c) => yourPage));
Try the following code:
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const loginScreen(),
),
);
Hello Flutter Developers. I have this issue which I need help with. I have created a sign up function in my code and I want it to be that when a user hit the sign up button it routes to the confirmation screen. Here's how the function is...
Future<void> signIn() async {
try {
final userAttribute = <CognitoUserAttributeKey, String>{
CognitoUserAttributeKey.email: _emailController.text,
};
final res = await Amplify.Auth.signUp(
username: _usernameController.text,
password: _passwordController.text,
options: CognitoSignUpOptions(userAttributes: userAttribute),
);
setState(() {
isSignedIn = res.isSignUpComplete;
});
} on AuthException catch (e) {
SnackBar(
content: Text('$e', style: const TextStyle(color: Colors.black)),
behavior: SnackBarBehavior.floating,
backgroundColor: Colors.white,
elevation: 16.0,
margin: const EdgeInsets.all(8.0),
);
}
}
and this is how the sign up button looks
Container(
height: 40.0,
width: 140.0,
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.circular(7.0),
),
child: TextButton(
onPressed: signIn,
child: Text(
'Sign In',
style: GoogleFonts.frijole(
color: Colors.black,
),
),
),
),
Anyone please help me I'd really appreciate it
Container(
height: 40.0,
width: 140.0,
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.circular(7.0),
),
child: TextButton(
onPressed: showPlatformDialog(
context: this.context,
builder: (context) => BasicDialogAlert(
title: Text("Are you sure?"),
actions: <Widget>[
BasicDialogAction(
title: Text("cancel"),
onPressed: () {
Navigator.pop(context);
},
),
BasicDialogAction(
title: Text("ok"),
onPressed: () {
signIn();
},
),
],
),
),
child: Text(
'Sign In',
style: GoogleFonts.frijole(
color: Colors.black,
),
),
),
),
And after setState(),add this line:
Navigator.pushReplacement(context, MaterialPageRoute(
builder: (context) => profile_page()
)
I made a custom function which opens modal bottom sheet in flutter. Now, I want to get some data back from the sheet to my previous page. How should I do it? I tried to make function's return type as Future<FilterDataModel> and Future, but it's not working. I want that whenever the user clicks on cancel, it should return false and when he presses apply, i should get true with the data.
Here is what I tried -
Future<FilterDataModel> showFilterBottomSheet<T>(
{required BuildContext context}) async {
Some code ...........
FilterDataModel filterData = FilterDataModel();
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) {
String val = "One";
return StatefulBuilder(
builder: (context, StateSetter setState) {
return Wrap(
children: [
Padding(
padding: EdgeInsets.symmetric(
vertical: getProportionateScreenHeight(20),
horizontal: getProportionateScreenWidth(16),
),
child: Column(
..............
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: InkWell(
onTap: () {
Navigator.pop(context, [false, filterData]);
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.white),
),
padding: EdgeInsets.symmetric(
vertical: getProportionateScreenHeight(16),
),
child: Center(
child: Text(
'Cancel',
style: TextStyle(
color: primaryText2,
fontSize: 16,
),
),
),
),
),
),
SizedBox(
width: getProportionateScreenWidth(20),
),
Expanded(
child: InkWell(
onTap: () {
Navigator.pop(context, [true, filterData]);
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.black38),
),
padding: EdgeInsets.symmetric(
vertical: getProportionateScreenHeight(16),
),
child: Center(
child: Text(
'Apply',
style: TextStyle(
color: primaryOrange,
fontSize: 16,
),
),
),
),
),
),
],
),
],
),
),
],
);
},
);
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
).then((value) {
debugPrint("Coming data");
debugPrint(filterData.academicYear.toString());
return filterData;
});
return filterData;
}
And how I am calling it -
onPressed: () async {
FilterDataModel f = await showFilterBottomSheet(
context: context,
);
print("Here - ${f.academicYear}");
},
I also tried to do it like this -
onPressed: () async {
await showFilterBottomSheet(
context: context,
).then((value) {
print("Inside then");
print(value[0]);
print(value[1].toString());
});
print("Here - ${f.academicYear}");
},
But it's not working.
You need to await your bottom sheet, to get the result that was returned from the Navigator.pop(context, value). so it will be like.
final res = await showModalBottomSheet(context, ....);
/// this is to make sure that the Navigator.pop(context) from the bottom sheet did not return a null.
if (res != null) {
FilterDataModel filterData = FilterDataModel();
return filterData;
} else {
return anything;
}
looks like when you pop navigator you return List< dynamic> (boolean + filterDataModel)
so the scheme is:
final result = await showModalBottomSheet<dynamic>(){
...
...
return YourWidget(
...
onTap: ()=> Navigator.of(context).pop([false, filterDataModel])
...
)
}
final boolResult = result[0] as boolean;
final dataResult = result[1] as FilterDataModel;`
take a note that if modal is dismissible then return will be null in case it is dismissed without returned value and you will have to handle this case also
for a while now, I was trying to learn Flutter for mobile development. So, everything is straight forward and easy to grasp.
But, the following issues I cannot seem to solve:
Resizing the CircleAvatar() in the AppBar: I tried using scale, size, nothing worked.
Whatever I added after the 1st ListView.builder(), the emulator does not read/ display
my flutter is up-to-date and no errors/issues are shown when I run flutter doctor or my run the app.
Thanks
Code Used:
class MessageScreen extends StatefulWidget {
static Route<dynamic> route() => MaterialPageRoute(
builder: (context) => MessageScreen(),
);
#override
_MessageScreenState createState() => _MessageScreenState();
}
class _MessageScreenState extends State<MessageScreen> {
String tempLink =
'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80';
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue[400],
appBar: AppBar(
elevation: 0.0,
leading: CircleAvatar(
backgroundImage: NetworkImage(tempLink),
radius: 15.0,
child: tempLink == null ? Text('HH') : null,
),
title: Text('Chats'),
backgroundColor: Colors.blue[400],
actions: [
IconButton(
onPressed: () {},
icon: Icon(Icons.search),
),
],
),
body: Column(
children: [
Row(
children: [
Container(
child: ListView.builder(
itemCount: newMatching.length,
padding: EdgeInsets.only(left: 6),
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => ChatScreen(
user: newMatching[index],
),
),
),
child: _profileButton(tempLink),
);
},
),
),
],
),
SizedBox(
height: 18,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20), topRight: Radius.circular(20)),
),
child: ListView.builder(
itemCount: chats.length,
itemBuilder: (BuildContext context, int index) {
final Message chat = chats[index];
return GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => ChatScreen(
user: chat.sender,
),
),
),
child: Container(
margin: EdgeInsets.only(top: 5, bottom: 5, right: 1),
padding:
EdgeInsets.symmetric(horizontal: 2, vertical: 5),
decoration: BoxDecoration(
color: chat.unread ? Color(0xFFFFEFEE) : Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(20.0),
bottomRight: Radius.circular(20.0),
),
),
child: _chatNavigatorButton(
chat.sender.imgAvatar,
chat.sender.fname,
chat.text,
chat.time,
chat.unread)),
);
}),
),
],
),
);
}
}
Try wrapping the CircleAvatar with a Container:
Container(height: 10, width: 10, child: CircleAvatar(...))
Is there a chance that chats simply has the length of 0 and no elements? Maybe the second ListView.builder() does display correctly but includes no items. At least that's what I can retrieve from the given code.
I was trying things out with ModalBottomSheet. How can I achieve 90% height of device screen size for modal sheet. I did mediaquery but still it does not give me more than half of the screen size. How do I solve this?
Here is the code:
class _TestFileState extends State<TestFile> {
modalSheet() {
showModalBottomSheet(
context: context,
backgroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0)),
),
builder: (context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
ListTile(
leading: Icon(Icons.email),
title: Text('Send email'),
onTap: () {
print('Send email');
},
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Call phone'),
onTap: () {
print('Call phone');
},
),
],
);
});
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Center(child: Text('Testing Modal Sheet')),
),
body: Center(
child: InkWell(
onTap: () {
modalSheet();
},
child: Container(
color: Colors.indigo,
height: 40,
width: 100,
child: Center(
child: Text(
'Click Me',
style: TextStyle(color: Colors.white),
),
)),
),
),
),
);
}
}
Here is the output:
you have to pass isScrollControlled: true and use mediaquery as given below
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (context) {
return Container(
height: MediaQuery.of(context).size.height * 0.5,
color: Colors.red,
//height: MediaQuery.of(context).size.height,
);
});
As I remember that's a restriction about the native implementation of Flutter modal bottom sheet.
You can use the package modal_bottom_sheet to achieve that.
Install:
dependencies:
modal_bottom_sheet: ^0.2.2
And minimal example:
showMaterialModalBottomSheet(
context: context,
expand: true, //this param expands full screen
builder: (context, scrollController) => Container(),
)