I am trying to use Navigator.pop(context); in an appbar but the problem is that it shows a black screen and then you have to press the back button on android then it pops current black screen, so where is this black screen coming from that I don't know and in iPhone there is no back button so that why it is stuck in that screen. Please do help me
This is the code where I am using this Navigator code.
#override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Color.fromRGBO(30, 30, 30, 1.0),
appBar: new AppBar(
elevation: 0.0,
backgroundColor: Color.fromRGBO(30, 30, 30, 1.0),
actions: <Widget>[
new IconButton(
icon: Icon(Icons.settings_power),
onPressed: () {
Navigator.pop(context);
}),
],
title: new Text(
"PROLOG",
style: new TextStyle(color: Colors.white),
),
centerTitle: true,
),
);
}
and the most strange thing is that I am using this piece of code in another class its working fine. So where is the problem...
The reason why you're getting a black/blank screen after calling Navigator.pop(context) is because there's no widget/screen beyond the current Navigator stack.
In Flutter, SystemChannels.platform.invokeMethod('SystemNavigator.pop') is used to remove the topmost Flutter instance. As mentioned in the docs, the method should remove the current Activity from the stack in Android. The behavior is a bit different on iOS though.
If you're trying to implement this function to close the app, this is highly discouraged. This is pointed out on Apple's archived doc. I'm trying to search for an updated reference, but navigating through Apple's Developer docs is challenging.
Anyway, I've made some changes to your code snippet if you'd like to try this out.
Add this in your imports
import 'dart:io' show Platform, exit;
As for the code, exit(int) is used for iOS. It's recommended to use an exit code from the range 0...127 as mentioned in the docs. While SystemChannels.platform.invokeMethod('SystemNavigator.pop') is used for other platforms (mainly Android in this case).
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Color.fromRGBO(30, 30, 30, 1.0),
appBar: new AppBar(
elevation: 0.0,
backgroundColor: Color.fromRGBO(30, 30, 30, 1.0),
actions: <Widget>[
new IconButton(
icon: Icon(Icons.settings_power),
// if Platform is iOS call exit(0)
// else call the preferred method
// https://api.flutter.dev/flutter/services/SystemNavigator/pop.html
onPressed: () => Platform.isIOS
? exit(0)
: SystemChannels.platform.invokeMethod('SystemNavigator.pop'),
),
],
title: new Text(
"PROLOG",
style: new TextStyle(color: Colors.white),
),
centerTitle: true,
),
);
}
Demo
Related
I'm sorry that I have never see or used an actual device with android OS such as Google pixcel, but I found that gray-out area on top of screen like screen shot below.
*This is "Pixcel 4 API 30 mobile emulator" called from vsCode.
And I found this kind of dead area on Pixcel 5 emulator as well, but am not sure that this is somthing in common for all android OS.
Finally, I'd like to ask that if I should avoid something to display here or this is only emulator matters and do not have to care about this ?
In case that I have to care this area with developing by flutter, should I intentionally separate code or design between these kind of device and the others, as I'm usually using Iphone emulator and actual machine but have never seen this area and beleive I need not to care this kind of area and adopting top-margin for this problem.
Thanks for your helpful comment.
Code Added:
class holder extends ConsumerWidget {
#override
Widget build(BuildContext context, WidgetRef ref) {
ref.watch(_modalProvider );
return Scaffold(
body: Column(
children: [
Container(
margin: const EdgeInsets.only(bottom: 10),
// flex: 1,
child: Container(
margin: EdgeInsets.only(top: 40),//should I do this to avoid this area?
width: double.infinity,
height: 40,
// color: Colors.grey,
alignment: Alignment.topLeft,
child: Image.asset('images/flutter.png'),
),
),
Flexible(
child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
Folders(
name: "list",
subTitle: null,
),
],
)
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.endTop,
floatingActionButton: Container(
width: 50.0,
child: FloatingActionButton(
backgroundColor: Colors.white,
child: const Icon(
Icons.search_sharp,
color: MyStyle.mainColor,
),
onPressed: () {
ref.read(_modalProvider.notifier).update((state){
showTopModalSheet<String?>(context, DumyModal());
});
},
),
),
);
}
}
That area will be also visible in real devices so you should take that area into consideration. But Scaffold widget will start the rendering from below that point so you don't have to think about it.
İf you want to change color of that area, you can
Container(
decoration: BoxDecoration(color: Color.white),
child: SafeArea(
Scaffold:...
)
)
It also effects IOS and Android devices differently, I believe that is why it is only visible in some devices
I am new to flutter and I am developing an app in Flutter. While I am doing this, I try to add ElevatedButton which is the latest version of RaisedButton, and its return error and I am also not sure why. I will insert the error code image and would be grateful if someone tells me what is the reason for the error and how to solve it. Thank you
You need to add a child widget (it is required in addition to onPressed function). Here is a sample code for Elevated Button. You can adjust it based on your needs:
ElevatedButton(
style: ElevatedButton.styleFrom(
onPrimary: Colors.white,
primary: Color(0xffccbbd7),
minimumSize: const Size(330,70),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
),
onPressed: () {},
child: const Text('click'),
),
You Forgot the child Widget inside ElevatedButton, in this button onPressed and child widgets are required
Refer ElevatedButton
Try below code
ElevatedButton(
onPressed: () {
// write your onPressed function here
print('Button Pressed');
},
child: const Text('Press Me'),
),
Your result screen->
Well, elevated button should have child inside. Can be text, icon or image
ElevatedButton(
onPressed: () {
print('Tombol baru saja ditekan!');
},
child: const Text('Hit me!'),
),
I need to implement such a widget in Flutter. Full version of the page, where this widget is going to be used is here Maybe you know build-in widgets, which could help me. But if there are none, what is the best way to implement this widget?
You can use a ListTile
ListTile(
leading: const Text("Lbikgabsb"),
trailing: Column(
children: [
const Text("900 P"),
const Text("2"), // add your decoration to the background
),
],
),
),
Alternatively you can use:
SizedBox(
height: your_height,
width:double.infinity,
child: Row(
children:[
Text("Lbikgabsb"),
Column(
children: [
const Text("900 P"),
const Text("2"), // add your decoration to the background
],
),
),
You can choose whichever approach works best for your app
I am using flutter for development and I want to send app to background or close it when user clicks on back icon on appbar
I have used this answer for reference but apart from exit(0) is nothing working, which is not recommended in iOS.
I have tried following recommendations from other answers but none of it working on iOS.
Navigator.of(context).pop();
Navigator.of(context).maybePop();
Navigator.of(context, rootNavigator: true).pop(context);
Navigator.pushReplacementNamed(context, '/route');
SystemNavigator.pop();
Navigator.pop(context,true);
SystemChannels.platform.invokeMethod('SystemNavigator.pop');
for android following is working properly.
SystemNavigator.pop();
What should I use to close the app within apple guidelines.
EDIT
SystemNavigator.pop(); gives black screen in iOS.
Try this
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black),
onPressed: () => Navigator.of(context).pop(),
),
title: Text("Sample"),
centerTitle: true,
),
I have a MultiBlocProvider assigned for an app that has a Bottom Navigation Bar to navigate through main routes like Home, Search, Wishlist ...
I use setState(){} to change the currentPage for each route.
Recently I've added Blocs to each of them by using flutter_bloc package and I'm using BlocProvider to provide the bloc to each BlocBuilder,
#override
Widget build(BuildContext context) {
return SafeArea(
top: false,
child: Scaffold(
key: _scaffoldKey,
body: PageStorage(
child: Stack(
children: <Widget>[
AnimatedSwitcher(
duration: Duration(milliseconds: 200),
child: BlocProvider<WishlistBloc>(
create: (BuildContext context) => WishlistBloc(WishlistRepository()),
child: currentPage),
),
bottomBar(currentPageScroll)
],
),
bucket: bucket,
),
),
);
}
Is it ok to use MultiBlocProvider to provide all the BlocsProviders I need?
they could be more than 10 providers, would it affect the performance of the app?
It's definitely OK, MultiBlocProvider created for this purposes. But you need to understand, that if you with your creation also send(for e.x.) initialize event which started loading in all 10 blocs some data you will have some issues. So, if you will have some performance issues, please create separate SO question and community will help to find root-cause of this.