my app is working fine on android but for ios its crashing ,
if i comment the AppBar , its working in ios, but with app its not working.
appBar: AppBar(), // here is the problem
#override
Widget build(BuildContext context) {
final screenSize = MediaQuery.of(context).size;
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(), // here is the problem
backgroundColor: Colors.black,
body: SafeArea(
main.dart code,
#override
Widget build(BuildContext context) {
pushNotificationMessage();
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
return MultiProvider(
providers: [
ChangeNotifierProvider<AppData>(create: (_) => AppData()),
],
child: GetMaterialApp(
title: 'ABC App',
debugShowCheckedModeBanner: false,
I think your issue here is Appbar conflicting with the non safe area in your iOS device (upper notch for example), so you can fix that by one of two ways:
First way(encouraged), you can wrap your scaffold itself in the SafeArea widget instead of the body of the scaffold:
#override
Widget build(BuildContext context) {
final screenSize = MediaQuery.of(context).size;
return SafeArea(
Scaffold(
key: _scaffoldKey,
appBar: AppBar(), // here is the problem
backgroundColor: Colors.black,
body: Container(
Second way, you can remove AppBar() from the scaffold and add it inside your body widget, for example:
#override
Widget build(BuildContext context) {
final screenSize = MediaQuery.of(context).size;
return Scaffold(
key: _scaffoldKey,
backgroundColor: Colors.black,
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: const EdgeInsets.only(bottom: 30), child: AppBar()),
Related
I want to make a floating widget but not floating all the time, when the widget is pulled up from the floating navigation bar it will appear like the picture in the middle
How to make a widget like this middle image?
this sample code of flutter for using showBottomSheet:
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 MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatelessWidget(),
),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({super.key});
#override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
child: const Text('showBottomSheet'),
onPressed: () {
Scaffold.of(context).showBottomSheet<void>(
(BuildContext context) {
return Container(
height: 200,
color: Colors.amber,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const Text('BottomSheet'),
ElevatedButton(
child: const Text('Close BottomSheet'),
onPressed: () {
Navigator.pop(context);
},
),
],
),
),
);
},
);
},
),
);
}
}
You can also try using sliding_up_panel to get the same functionality.
It is pretty straight forward to implement and offers plenty customization features as well:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("SlidingUpPanelExample"),
),
body: Stack(
children: <Widget>[
Center(child: Text("This is the Widget behind the sliding panel"),),
SlidingUpPanel(
panel: Center(child: Text("This is the sliding Widget"),),
)
],
)
);
}
Try the Stack variant so that it doesn't hinder too much with your current code.
I'm getting an error in modal.route and I can't enter text, can you help?
#override
Widget build(BuildContext context) {
VeriModeli iletilenArgumanlar = ModalRoute.of(context).settings.arguments;
return Scaffold(
appBar: AppBar(title: Text("Profil Sayfası")),
body: Container(
child: Column(children: [
ElevatedButton(onPressed: cikisYap, child: Text("Çıkış Yap")),
Text(iletilenArgumanlar.kullaniciaAdi),
Text(iletilenArgumanlar.sifre),
]),
),
);
}
}
try this
#override Widget build(BuildContext context) {
VeriModeli? iletilenArgumanlar = ModalRoute.of(context)!.settings.arguments as VeriModeli?;
var cikisYap;
return Scaffold(
appBar: AppBar(title: Text("Profil Sayfası")),
body: Container(
child: Column(children: [
ElevatedButton(onPressed: cikisYap, child: const Text("Çıkış Yap")),
Text(iletilenArgumanlar!.kullaniciaAdi),
Text(iletilenArgumanlar.sifre),
]),
),
);
}
if you still facing the error then call the arg like this "${iletilenArgumanlar}"
When I have an AppBar on my screen, it looks like this:
But I don't need AppBar so I removed it. As a result my screen looks like this:
As you can see, the top of my screen is in the StatusBar (where there are clock, Internet connection icon, and so on).
Please help me change my code so that my screen starts right after the StatusBar.
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Container(
child: Scaffold(
// appBar: AppBar (title: const Text(_title)),
body: const MainWidget(),
),
)
);
}
Thanks in advance.
Edit 1. Why doesn't this work for the Container case? I had this code on another screen:
#override
Widget build(BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height,
...
I changed it to this:
#override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
height: MediaQuery.of(context).size.height,
...
But nothing has changed. Why?
Wrap your scaffold body with SafeArea widget
#override
Widget build(BuildContext context) {
return SafeArea(
For your case, do it on home or scaffold.
home: SafeArea(
More about SafeArea
I want to put AppBar just under status bar, but I couldn't, what can I do?
I tried primary:true, or SafeArea, my code as below:
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("ホーム"),
),
body: Center(child: Text("ホーム")),
);
}
}
I also tried code from answer, but same result.
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("ホーム"),
),
body: Center(child: Text("ホーム")),
));
}
}
You should try the SafeArea. But you must wrap the entire Scaffold inside the SafeArea.
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("ホーム"),
),
body: Center(child: Text("ホーム")),
)
);
}
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
var sbHeight = MediaQuery.of(context).padding.top;
return Container(
margin: EdgeInsets.only(top: sbHeight),
child: Scaffold(
appBar: AppBar(
title: Text("Title"),
centerTitle: true,
),
body: Center(child: Text(sbHeight.toString())),
),
);
}
}
You can use more about SafeArea here: SafeArea
I am just trying to create an simple widget but it keeps showing this error what should I do?
It looks like your root widget is not MaterialApp, other widgets that you are using need to be descendants of some media query ancestor. Eg. MaterialApp.
Instead of this:
Widget build(BuildContext context) {
return Container(
child: SomeWidget(),
);
}
Make it:
Widget build(BuildContext context) {
return MaterialApp(
home: SomeWidget(),
);
}
You are getting the error because your application doesn't return a Material App. Check this code below, it works perfectly.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.redAccent,
title: Text('unit converter', textScaleFactor: 1.0,),
),
body: Container(
color: Colors.purpleAccent,
),
),
);
}
}
The output of the code:
You are getting this error because on the top of the tree a material widget should be used.
here you can use Scaffold or MaterialApp widget.
and If you are trying to paint your screen background to some color then just use the parameter backgroundColor under your Scaffold widget.
Try code shown below
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.purpleAccent,
appBar: AppBar(
backgroundColor: Colors.redAccent,
title: Text("unit converter",textScaleFactor:4.0)
),
body: yourWidget()
);
}