I'd like to achieve the effect shown on the screenshots below:
First scenario:
The green widget is fixed to the bottom. Container isn't scrollable, as the content is short enough.
Second scenario:
The green widget is pushed to the bottom. The container is scrollable, as the content is too long to fit in the viewport.
The problem is, that since technically SingleChildScrollView's height is infinite, it's impossible to push the green widget to the end of the viewport.
So, what needs to be done for this effect to be achieved (also, both the blue and the green widgets are of dynamic height)?
Try this:
import 'package:flutter/material.dart';
void main() {
runApp(const App());
}
class App extends StatelessWidget {
const App();
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: [
Expanded(
child: SingleChildScrollView(
child: Container(
height: 300,
color: Colors.blue,
),
)),
Container(
height: 100,
color: Colors.green,
)
],
)),
);
}
}
Mess around with the blue containers height to get scrolling to work. The key Widget here is Expanded as it makes it's child height be the greatest room available inside the column. It will take up the rest of the space that the green container is not using
Id highly recommend reading this article to better understand how widgets are laid out in Flutter.
use bottomNavigationBar parameter in you Scaffold for fixed widget to bottom screen
Related
I'm a couple days into learning Flutter, and I keep running into a situation where I want to scale a collection of widgets (aka a Row, Column, Stack, etc) down when the screen shrinks, akin to what Flexible() does. Except unlike Flexible(), I want all children to scale down when the container shrinks, not just the largest elements. Consider this example of a Column() (green) with two children: a red child matching its parent's width, and a blue child with half the parent's width:
In the above case, if the green Column() were to be constrained such that its width was less, you would end up with something like such:
However, what I am wanting is for each of the child elements (red/blue) to scale their width/height relative to each other, like this:
How can I accomplish this?
In the specific Column() case I illustrated above, my workaround was to add a Row() containing the blue widget as well as a Padding(), both with equal flex properties, so that when the Column() shrunk the blue element scaled correctly. I feel like this is a hack though, and wouldn't be as feasible if I had many elements with differing widths/alignments. It would be a nightmare to add one Padding() for left/right aligned elements and two for centered ones. Is there a better way?
I'd also like to know of a similar solution for using Stack()s. Using the Positional() element seems to set the width/height in a way that the Stack() crops any overflow. It'd be nice to have a Stack() that scales all its children the same, just like if it was a single image, and similar to my Column() example above.
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 SizedBox.expand(
child: FractionallySizedBox(
widthFactor: 0.5,
heightFactor: 0.5,
alignment: FractionalOffset.center,
child: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
width: 4,
),
),
),
),
);
}
}
FractionallySizedBox Widget is a widget that sizes its child to a fraction of the total available space. To make it easy to understand how FractionallySizedBox works
You can have a look at FractionallySizedBox class, you can specify the widthFactor and heightFactor e.g. 0.5 so that it is always half the size of the parent container.
Example:
Flexible(
child: FractionallySizedBox(
widthFactor: 0.5,
heightFactor: 0.5,
alignment: FractionalOffset.centerLeft,
child: Container(
color: Colors.blue),
),
),
In the code below, a row of two 300x300 boxes (_Box) wrapped with FittedBox shrinks to fit in the screen. As a result, each box becomes smaller than 300x300.
However, if I get the width of a box in the build() method of _Box using RenderBox.size and LayoutBuilder(), the obtained size is 300.0 and Infinity respectively.
How can I get the actual displayed size?
I'd like to get it inside the _Box class, without it getting passed from the parent.
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: FittedBox(
child: Row(
children: <Widget>[
_Box(Colors.red),
_Box(Colors.orange),
],
),
),
),
),
);
}
}
class _Box extends StatelessWidget {
const _Box(this.color);
final Color color;
#override
Widget build(BuildContext context) {
RenderBox renderBox = context.findRenderObject();
print(renderBox?.size?.width); // 300.0
return LayoutBuilder(
builder: (_, constraints) {
print(constraints.maxWidth); // Infinity
return Container(
width: 300,
height: 300,
color: color,
);
},
);
}
}
The Flutter constraints object is used to limit how large or small a widget can be rendered, and is usually never really used to get the current size of the widget.
The renderBox.size object is of Size class, and as a result it has both renderBox.size.width and renderBox.size.height as defined getters. Note that these values can only be set once the layout phase of the current view is over: see the findRenderObject() docs page.
This means that you will have to avoid calling findRenderObject() from the build() method. Instead you will have to define a callback function that must execute after the layout process is complete. You can do this using that have widgets that have callback functions like onTap or onSelected. How you implement this and finally get the actual layout size by running the callback function is totally dependent on your use case.
Further recommended reading:
DevelopPaper - Sample code for getting the width and height of screen and widget in Flutter
Flutter on Github - How to get a height of a widget? #16061
Rémi Rousselet's amazing answer explaining his workaround (using an Overlay widget)
I'll answer my own question, although it is not a direct answer.
I couldn't find a way to get the size shrinked by FittedBox, but I realised that I was able to get around it by using Flexible instead.
SafeArea(
child: Row(
children: const [
Flexible(
child: _Box(Colors.red),
),
Flexible(
child: _Box(Colors.orange),
),
],
),
);
#override
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 300.0),
child: AspectRatio(
aspectRatio: 1.0,
child: ColoredBox(color: color),
),
);
}
It still seems impossible to get the size via RenderBox, and it is now possible with LayoutBuilder. But either way, I didn't need them.
The constraints of the two boxies are shrinked by Flexible if a smaller space is available, but they expand as big as the space allows, so I limited the maximum size using ConstrainedBox and AspectRatio.
I didn't have to stick to FittedBox. I think I was obsessed with the idea of using it and couldn't think of other solutions when I posted the question two years ago.
I am facing a problem with the listview when height is bounded, so when I change the phone font size an overflow occurs and I don't want to give extra height to the container.
Container(
height: fixed height goes here,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
some widgets goes here...
],
),
)
you can try to rely on textScaleFactor, by default it's 1.0
if you change font size on Settings page of your device this value will be changed to 1.15, 1.3 and so on (in 0.15 steps).
so you can multiply container height by this value:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(),
body: SafeArea(child: Home()),
),
);
}
}
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
double h = MediaQuery.of(context).textScaleFactor;
return Center(
child: Text('$h'), // with default settings it shows 1.0
);
}
}
In case your looking for the device font size (set inside the settings activity of the smartphone), you can use textScaleFactor property of the MediaQuery class.
double textScale = MediaQuery.of(context).textScaleFactor;
Alternatively, you can get the same value like this:
double textScale = MediaQuery.textScaleFactorOf(context);
As a heads up, all of the font sizes in Flutter are automatically scaled by this setting so if a user has their font scaled way up, you might hit some overflow errors. With that said, doing the same thing while you're debugging is an awesome way to find where your layout might overflow.
Check out the accessibility section of the Flutter Docs for some more info.
You need to detect screen height and give your Container() height according to tha, and keep it detecting whenever build() method being re-called.
That's how to get a responsive height for your Container()
MediaQuery() could do that, as follow :
Container(
height: MediaQuery.of(context).size.height, // screen's size.height
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
some widgets goes here...
],
),
)
Flutter says about size property :
The size of the media in logical pixels (e.g, the size of the screen).
Scrollbar widget in Flutter seems to have a fixed thickness of 6. I think the Scrollbar looks ugly, it is too thick. Also if I compare Flutter Scrollbar to scrollbars in other apps in my device, they all look different (they look better).
Can I change the Scrollbar thickness without creating a new Scrollbar widget?
I had an idea to force Scrollbar partially out of screen to make it look thinner, but I don't know how to do that.
I am using the Scrollbar with a ListView.
Just change the thickness property from scrollbar theme data:
class MyApp extends StatelessWidget {
final double _thickness = 2;
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData.light().copyWith(
scrollbarTheme: ScrollbarThemeData().copyWith(
thickness: MaterialStateProperty.all(_thickness),
)
),
);
}
}
I found a relatively simple workaround which to wrap the Scrollbar in a Stack widget and add to Stack a Container which will hide part of the Scrollbar. There will be a small 'white' margin in the right edge of the screen but you will see similar margin e.g. in OS settings views (at least in Galaxy S7 settings app). Sample code (notice that this is for Android only, not tested in iOS):
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.topRight,
fit: StackFit.loose,
children: <Widget>[
Scrollbar(
child: buildListView(),
),
Container(
width: 3,
color: Theme.of(context).canvasColor,
)
],
);
}
I am trying to understand the SafeArea widget in Flutter.
SafeArea code added to Flutter Gallery app here in github show top:false and bottom:false everywhere. Why do these need to be set false in these cases?
SafeArea is basically a glorified Padding widget. If you wrap another widget with SafeArea, it adds any necessary padding needed to keep your widget from being blocked by the system status bar, notches, holes, rounded corners, and other "creative" features by manufacturers.
If you are using a Scaffold with an AppBar, the appropriate spacing will be calculated at the top of the screen without needing to wrap the Scaffold in a SafeArea and the status bar background will be affected by the AppBar color (Red in this example).
If you wrap the Scaffold in a SafeArea, then the status bar area will have a black background rather than be influenced by the AppBar.
Here is an example without SafeArea set:
Align(
alignment: Alignment.topLeft, // and bottomLeft
child: Text('My Widget: ...'),
)
And again with the widget wrapped in a SafeArea widget:
Align(
alignment: Alignment.topLeft, // and bottomLeft
child: SafeArea(
child: Text('My Widget: ...'),
),
)
You can set a minimum padding for edges not affected by notches and such:
SafeArea(
minimum: const EdgeInsets.all(16.0),
child: Text('My Widget: ...'),
)
You can also turn off the safe area insets for any side:
SafeArea(
left: false,
top: false,
right: false,
bottom: false,
child: Text('My Widget: ...'),
)
Setting them all to false would be the same as not using SafeArea. The default for all sides is true. Most of the time you will not need to use these settings, but I can imagine a situation where you have a widget that fills the whole screen. You want the top to not be blocked by anything, but you don't care about the bottom. In that case, you would just set bottom: false but leave the other sides to their default true values.
SafeArea(
bottom: false,
child: myWidgetThatFillsTheScreen,
)
Supplemental code
In case you want to play around more with this, here is main.dart:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: BodyWidget(),
),
);
}
}
class BodyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.topLeft,
child: SafeArea(
left: true,
top: true,
right: true,
bottom: true,
minimum: const EdgeInsets.all(16.0),
child: Text(
'My Widget: This is my widget. It has some content that I don\'t want '
'blocked by certain manufacturers who add notches, holes, and round corners.'),
),
);
}
}
When you wrap a widget A in a safe area, you are asking to the framework "Please, keep my widget A away from the device's UI navigation and notches".
The arguments 'top, bottom, right and left' are used to tell to the framework if you want him to avoid the device's intrusions from that sides specifically.
For example: if you put your widget A inside a safe area in the top of the screen and sets the "top" argument to false, it will be cropped by the iPhone's X and Pixel 3's notches.
SafeArea is a widget that sets its child by enough padding to avoid intrusions by the operating system and improve the user interface.
import 'package:flutter/material.dart';
class SafeArea extends StatefulWidget {
#override
_SafeAreaState createState() => _SafeAreaState();
}
class _SafeAreaState extends State<SafeArea> {
#override
Widget build(BuildContext context) {
MediaQueryData mediaQueryData=MediaQuery.of(context);
double screenWidth = mediaQueryData.size.width;
var bottomPadding=mediaQueryData.padding.bottom;
return Padding(
padding: EdgeInsets.only(bottom: bottomPadding),
child: Scaffold(
body: new Container(
),
),
); }}
Without using SafeArea in iPhone 12 pro max
With using SafeArea
Code snippet using SafeArea
SafeArea(
child: Text('Your Widget'),
)