I have a waved app bar that looks like this:
As you can see the clipped area is not transparent but rather has the (black) canvas color and is blocking some ListView entries.
The code for the app bar looks something like this:
class MainAppBar extends StatelessWidget implements PreferredSizeWidget {
...
#override
Widget build(BuildContext context) {
return PreferredSize(
child: ClipPath(
clipper: WaveClip(),
child: Container(
color: getAppBarColor(),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
...
],
),
),
),
preferredSize: const Size.fromHeight(kToolbarHeight + 60));
}
}
As one can see I am using a ClipPath with a custom clipper to clip a Container. How do I clip it in a transparent manner?
try this:
Scaffold(
extendBodyBehindAppBar: true,
this will make items behind appbar visible
Related
I want to remove the strange padding on top of the status bar. I am simply using an image and want to put that image on top of the screen that is behind the status bar. So that the status bar icons should be overlayed on the image.
Simply using Scaffold as a parent widget and then simple an Image. Screen shot is here!
The icons are not properly overlapping the image, and there is a white padding on top head!
I am using an Android Emulator right now, can somebody please figure out what I am missing.
class PreSignInScreen extends StatelessWidget {
final PreSignInController controller = Get.put(PreSignInController());
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(
height: 10,
),
getRedCarBox(context),
]
);
)
}
Thanks & Advance
Try below code, I have tried
- Scaffold
- Column
- Container
- Image
Your Widget:
Scaffold(
body: Column(
children: [
Container(
width: double.infinity,
height: 300,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
'https://cdn.pixabay.com/photo/2022/03/27/11/23/cat-7094808__340.jpg',
),
),
),
),
//Add your other widgets here
],
),
),
Or Using SafeArea, top property false
SafeArea(
top: false,
child: Container(),
),
Result Screen->
Try this:
#override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
return false;
},
child: Scaffold(
body: SafeArea(
top: false,
bottom: false,
child: _buildBody(),
),
),
);
}
Scaffold(
body: SafeArea(
top: false,
bottom: false,
child: _yourBody(),
),
Why to use SafeArea :
SafeArea class Null safety. A widget that insets its child by sufficient padding to avoid intrusions by the operating system. For example, this will indent the child by enough to avoid the status bar at the top of the screen.
I need help. At the moment I'm trying to implement a background on my login page.
My problem is that I use a custom shape painter which shows my background.
To make my login page more dynamic I have added a function resizeToAvoidBottomInset: true, to move the textfield over the keyboard.
But now I have the problem that my background will be smaller if I click on my text field.
Here is my login page:
My code:
class _DebugPage extends State<DebugPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
appBar: customSubAppBar('Debug', context),
body: Stack(
children: [
//my custom shape painter
Expanded(
child: CustomeShapePainer(),
),
//my custom widgets
_body(context),
],
),
);
}
}
Is there a way to set the background on fix size?
I think you can try set widget CustomeShapePainer wrap Widget Stack. I don't remember exactly but in some projects I did
child: SingleChildScrollView(
child: Container(
color: AppConstants.bgColor,
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: CustomPaint(
painter: CurvePainter(),
child: Stack
I want to reuse mobile app code for flutter web. I already coded with AppBar() and body widgets in scaffold in all screens. Now i am taking 400 width and center for web, it is good except appbar.
Scaffold(
appBar: this.getAppBarWidget(),
body: Center(
child: Container(
width: kIsWeb ? 400.0 : MediaQuery.of(context).size.width,
child: this.getBodyWidget(),
),
))
Above code is perfectly working for all screens of mobile and web except appbar in web.
How do i change width of appbar to fit width 400 ?
If i use Size.fromWidth(400) getting error.
Below code is working for mobile and web.
Scaffold(
body: Center(
child: Container(
width: kIsWeb ? 400.0 : MediaQuery.of(context).size.width,
child: Column(
children: [
this.getCustomAppbarWidget(),
this.getBodyWidget(),
],
),
),
))
Please suggest me.
The size this widget would prefer if it were otherwise unconstrained.
In many cases it's only necessary to define one preferred dimension. For example the [Scaffold] only depends on its app bar's preferred height. In that case implementations of this method can just return new Size.fromHeight(myAppBarHeight).
But we can provide customAppBar like
class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
const MyAppBar({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.centerLeft,
child: Container(
alignment: Alignment.center,
color: Colors.pink,
// we can set width here with conditions
width: 200,
height: kToolbarHeight,
child: Text("MY AppBar"),
),
);
}
///width doesnt matter
#override
Size get preferredSize => Size(200, kToolbarHeight);
}
and use
Scaffold(
extendBodyBehindAppBar: true,
appBar: MyAppBar(),
body: ......
if it cover the 1st item of body, and in this case use SizedBox(height: kToolbarHeight) to handle the situation if needed.
Result
As i know, width did not allow in AppBar. Only height is allowed in AppBar
toolbarHeight: 60,
But if you want to apply manually width in your AppBar you can wrap your AppBar in Padding component
return Scaffold(
body: Column(
children: [
Container(
width: kIsWeb? 400 : double.maxFinite,
child: AppBar(
title: Text('hello'),
),
),
Expanded(child: HomePageOne()), // this expanded is you page body
],
),
);
I display a custom-made bottom app bar in a Stack because of keyboard padding reasons. The custom widget is fully opaque as it should be until it's a child of a Stack in which case, the content behind it starts to be visible since the color's opacity somehow changes.
As you can see, it's only the "main" color that's transparent. Icons remain opaque.
This is the build method of my custom BottomBar widget which is then just regularly put into a Stack. I have tried using a Material and even a simple Container in place of the BottomAppBar widget but the results are the same.
#override
Widget build(BuildContext context) {
return BottomAppBar(
color: Colors.blue.withOpacity(1),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(MdiIcons.plusBoxOutline),
onPressed: () {},
),
Text('Edited 11:57'),
IconButton(
icon: Icon(MdiIcons.dotsVertical),
onPressed: () {},
),
],
),
);
}
Can you interact with the BottomAppBar ? It looks like an order problem. Try to put the BottomAppBar as last in the Stack children.
Note that BottomAppBar doesn't have a constant size, if you did not add it to Scaffold bottomNavigationBar named parameter has a size if this is not null. Below is peace of code in Scaffold dart file:
double bottomNavigationBarTop;
if (hasChild(_ScaffoldSlot.bottomNavigationBar)) {
final double bottomNavigationBarHeight = layoutChild(_ScaffoldSlot.bottomNavigationBar, fullWidthConstraints).height;
bottomWidgetsHeight += bottomNavigationBarHeight;
bottomNavigationBarTop = math.max(0.0, bottom - bottomWidgetsHeight);
positionChild(_ScaffoldSlot.bottomNavigationBar, Offset(0.0, bottomNavigationBarTop));
}
You can even develop your own Widget without BottomAppBar but if you want things like centerDocked and things like circular notched, you will have to do more stuff (anyway you have flexibility to custom design the way you want).
Here is a simple example to do that(one way to do that):
import 'package:flutter/material.dart';
class CustomBottomBar extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 50),
color: Colors.greenAccent, // if you want this color under bottom bar add the margin to list view
child: ListView.builder(
itemCount: 100,
itemBuilder: (_, int index) => Text("Text $index"),
),
),
Positioned(
bottom: 0,
child: Container(
color: Colors.amber.withOpacity(.5),
width: MediaQuery.of(context).size.width,
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: List.generate(4, (int index) => Text("Text $index")), // you can make these clickable by wrapping with InkWell or any gesture widget
),
),
),
],
),
);
}
}
I need a layout without an appbar, so the most obvious approach is to just leave out the appbar tag on the Scaffold but if I do that the content goes underneath the status bar like this:
As you can see my container which is colored in blue starts right from underneath the status bar which shouldn't be the case, so I had to manually set the margin of the container which is not so nice, this is the results:
I have this feeling that devices might have status bars with varying heights so setting my top margin to fixed size might not render properly on other devices. Is there a way for flutter to position my content automatically below the status like it positions the AppBar nicely below the status bar.
Here is my scaffold code:
return new Scaffold(
body: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new HeaderLayout(),
],
),
);
This is my header container:
class HeaderLayout extends StatelessWidget{
#override
Widget build(BuildContext context) {
return new Container(
color: Colors.blue,
margin: const EdgeInsets.only(top: 30.0),
child: new SizedBox(
height: 80.0,
child: new Center(
child: new Text(
"Recommended Courses",
style: new TextStyle(color: Colors.white),
),
),
)
);
}
}
Wrap your Column with SafeArea
body: new SafeArea(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new HeaderLayout(),
],
)
) ,
SafeArea is a widget that insets its child by sufficient padding to avoid intrusions by the operating system.
For example, this will indent the child by enough to avoid the status bar at the top of the screen.
You can get the OS padding with MediaQuery.
You'd have to replace your
margin: const EdgeInsets.only(top: 30.0),
by
margin: MediaQuery.of(context).padding,
Another solution is to wrap your content inside a SafeArea. Which basically does the same thing.
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.blue, // navigation bar color
statusBarColor: Colors.pink, // status bar color
));
}