I am developing an app where I need to use the safe area to avoid unnecessary swiping. Though I have implemented the safe area in a custom container to render the screens, it leaves a white margin on top.
When I add these parameters to the SafeArea() widget,
top: false,
maintainBottomViewPadding: true,
the white space goes away. However, the size of the app bar is too big. This is the minimal code
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
class DashboardActivity extends StatefulWidget {
#override
_DashboardActivityState createState() => _DashboardActivityState();
}
class _DashboardActivityState extends State<DashboardActivity> {
#override
Widget build(BuildContext context) {
return SafeArea(
//top: false,
//maintainBottomViewPadding: true,
child: Scaffold(
backgroundColor: Colors.white,
resizeToAvoidBottomInset: true,
appBar: CupertinoNavigationBar(
backgroundColor: Colors.grey,
leading: InkWell(
child: Icon(
Icons.arrow_back_ios,
color: Colors.white,
),
onTap: () => Navigator.pop(context),
),
middle: Text(
"Dashboard",
),
),
body: Text(
'This is an example use of SafeArea',
),
),
);
}
}
This only happens on tall displays, i.e. something more than an 18:9 aspect ratio.
Can someone tell me what's wrong and how can I fix this?
SafeArea is basically the same Padding widget. The difference is it adds padding to its child widget when it is necessary (For example, it will indent the child by enough to avoid the status bar at the top of the screen).
The reason why it is working on smaller screens is that SafeArea doesn't add any padding there (it is like to have something like this padding: EdgeInsets.symmetric(vertical: 0))
When you are wrapping your Scaffold inside SafeArea on taller screens it is calculating necessary padding value and adding it to Scaffold.
This is why you are getting this:
The correct use case of SafeArea is to use it inside body:.
Flutter AppBar and CupertinoAppBar widgets is handling device screen types by themselves.
Related
The Problem
I have a card that contains a row of two elements, the second one being a column of two texts. One of the texts can be long, so the column-element itself can overflow.
Coming from CSS, a "width: 100%" would usually be enough here.
What I already tried
I learned you could wrap the column with something like Expanded or Flexible, but it leads the text to become invisible (and the overflow still existing).
I am not sure where exactly I have to put the Flexible/Expanded.
I looked into similar questions and there was always an "Expanded", but I could not apply any of said solutions to my layout so far.
Question
What is the cleanest way to get the outlined box to be only as wide as the padding should allow?
Code
#override
Widget build(BuildContext context) {
return (Card(
child: InkWell(
onTap: () {
print("tab" + name);
},
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(25),
child: SizedBox(
width: 50,
height: 50,
child: Image(
image: NetworkImage(imageUrl),
),
),
),
Padding(
padding: const EdgeInsets.all(16),
child: Container(
decoration: BoxDecoration(
border: Border.all(width: 1, color: Colors.purpleAccent),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
name,
overflow: TextOverflow.ellipsis,
style: const TextStyle(fontWeight: FontWeight.bold),
textAlign: TextAlign.left,
),
Text(
description,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
),
],
),
),
),
],
),
),
),
));
}
You can surround the Padding widget inside your Row with an Expanded widget - The child of Expanded will then size itself to the space available.
For some additional context, Rows and Columns are both Flex widgets. Flex widgets layout their children along an axis, and the size of this axis is unbounded by default. Even though the widget "knows" how much space it has available on the display, it doesn't pass that information along to its children, so the children are free to take whatever size they want, which means they can potentially overflow the container.
An Expanded widget can only be placed as a direct child of a Flex widget, and it automatically takes up a given proportion (given by the flex property) of the space available to it (by default that will simply be all of the space which is not taken up by other widgets in the children list).
So essentially, Expanded will take up as much space as the parent widget has available, and then will constrain it's child to be no larger than that (along whichever axis pertains).
The link above to the Flex documentation has more info.
I'm making a flutter app where there's a gridview of cards that shows details of different items in a list. In the top right corner of the card I added a banner using the banner widget that shows the current status of the item.
This is what the banner looks like. But I want to move the banner a bit more to the corner as well as make it more wider.
Card(
elevation: 1.0,
child: ClipRect(
child: Banner(
textStyle: TextStyle(color: Colors.white),
message: 'OPEN'
location: BannerLocation.topEnd,
color: const Color(0xFF0db3ae),
child: InkWell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('......')
),
onTap: () {},
),
),
),
);
This is the basic structure of the code I used to make the cards and to make sure the banner wraps around the card. But i can't find a way to increase it's width or move it a bit more to the corner.
Dev's..
I am getting an issue in my Flutter App..
When I am using LinerGradient Widget in my app on a Container Widget..
My LinearGradient not going smooth...
Please Help..
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class NowPlayingScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
//Variables
final mySize = MediaQuery.of(context).size;
return Scaffold(
body: Stack(
children: [
//Todo : First Container Background
Container(
height: mySize.height,
width: mySize.width,
color: Color(0xFF9D9D9D),
),
Container(
height: mySize.height,
width: mySize.width,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomRight,
end: Alignment.topLeft,
colors:[
Colors.black,
Colors.transparent
],
)
),
),
],
),
);
}
}
enter image description here
From my opinion it looks perfectly but if you wanna change the gradient size of particular color add 'stops' property for linear gradient
for eg:
Container(
height: mySize.height,
width: mySize.width,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomRight,
end: Alignment.topLeft,
colors:[
Colors.black,
Colors.transparent
],
stops:[0.5,0.2],
)
),
),
For more info:
https://api.flutter.dev/flutter/painting/LinearGradient-class.html
There is nothing wrong with your code, you are just seeing banding which is caused by the gradient covering the whole screen.
If you create a gradient from white (#FFFFFFFF) and black (#FF000000) there will be exactly 256 shades that you will be able to see. If you have a large display each band will have multiple pixels and (depending on how good your eyes are) you will be able to see these bands. You can experiment with this by changing the color of your bottom container. Using dark green (#FF003300) will make bands more obvious and using bright red (#FFFF0000) will make them much harder to see.
The best way to fix this is to make the size of your gradient container smaller, or increase the range of the gradient. These will cause each band to take up fewer pixels and make them less noticeable.
Add dithering effect in main dart
void main() {
Paint.enableDithering = true;
runApp();
}
This is from London App Brewery completed Flutter project "BMI Calculator": https://github.com/londonappbrewery/BMI-Calculator-Flutter-Completed.git
I'm not sure if caused by my outdated android phone or the android screen is too small, but I'm getting Bottom Overflow Pixels For example, the top two cards have an error message of Bottom Overflow by 19 Pixels, the center card has an error of Bottom Overflowed by 60 pixels, and bottom two cards have an error of Bottom Overflowed by 56 pixels.
Additionally, if I rotate my phone to 90 degrees, the card image size decreases dramatically, as you can see from the second image.
Please help me fix this.
Thank you
class _InputPageState extends State<InputPage {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(
title: Text('BMI CALCULATOR'),
),
body: Column(
children: <Widget[
Expanded(
child: Row(
children: <Widget[
Expanded(
child: ReusableCard(
colour: colorCode,
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget[
Icon(
FontAwesomeIcons.mars,
size: 20.0,
),
SizedBox(
height: 5.0,
),
Text(
'MALE',
style: TextStyle(
fontSize: 10.0,
color: Color(0xFF8D8E98),
),
)
],
),
),
)]),),
]));
}
}
This is happening because your UI takes up too much space for your phone! You have two options to solve this.
Either you wrap your overflowing widgets in a scrolling widget, like SingleChildScrollView, this will let you scroll the Widget if it is too large.
Or you calculate the size of the widget based on device size. You can do that by using the MediaQuery class:
MediaQuery.of(context).size.height Can be used to get device height for instance.
Have a look at this article if you want to go down that path. https://medium.com/tagmalogic/widgets-sizes-relative-to-screen-size-in-flutter-using-mediaquery-3f283afc64d6
Of course you could also just reduce the size of your Widgets so it fits on your device. Thats fine for Tutorial purposes, but if you actually want to publish an App, go with the MediaQueryapproach.
Good luck!
I am looking to create an indicator widget for my pageview app, that means that It will be inside my widget tree.
What I have remarked is that When I use
PageViewIndicator class, it's automatically placed either in bottom or centre but when I place it in the center, for example, it hides my fields thing that I don't want, so what do you think?
I have used This
PageIndicatorContainer(
pageView: PageView(
children: customWidgetLists,
controller: controller,
),
align: IndicatorAlign.Center,
length: 4,
indicatorSpace: 20.0,
padding: const EdgeInsets.all(10),
indicatorColor: Colors.white,
indicatorSelectorColor: Colors.blue,
shape: IndicatorShape.circle(size: 12),
// shape: IndicatorShape.roundRectangleShape(size: Size.square(12),cornerSize: Size.square(3)),
// shape: IndicatorShape.oval(size: Size(12, 8)),
}
Everything works fine, just I want the dots to be in the centre of the screen and not cover the other widgets because it did.