I want to make my screen into 3 equal part using container class in flutter. How to do that?
What you want is the Flexible widget
Let's say you want the three equal parts to be stacked vertically
return Column(
children: [
Flexible(child: Container()),
Flexible(child: Container()),
Flexible(child: Container()),
]
);
You can also specify a flex component to signify the relationship between the widgets' sizes
return Column(
children: [
Flexible(child: Container(), flex:1),
Flexible(child: Container(), flex:2),
]
);
which will make the second widget take 2/3 of the available space
I prefer using LayoutBuilder, it constraints that can be used to get body height,maxWidth, also it provides more than this. Also, you can try media query.
#override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) => Column(
children: [
Container(
height: constraints.maxHeight / 3,
width: constraints.maxWidth,
color: Colors.deepPurple,
),
Container(
height:size.height/3,
width: size.width/3,
color: Colors.deepPurple,
)
],
),
));
}
You can remove Column it's just an example. Using LayoutBuilder provide parents' constraints.
Related
As a demo, I have taken two container inside Column and I have used MediaQuery height for both container and deducting size of appear..eventhought it is showing 24 pixel overflow...and if I wrap column with SingleChildScrollView..it scrolls which should be not scrolled as both container's height sum is 1.
here is my demo code
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
final appbar=AppBar();
return Scaffold(
appBar: appbar,
body: SingleChildScrollView(
child: Column(
children: [
Container(
height: (MediaQuery.of(context).size.height-appbar.preferredSize.height)*0.40 ,
color: Colors.green,
),
Container(
height: (MediaQuery.of(context).size.height-appbar.preferredSize.height)*0.60 ,
color: Colors.red,
),
],
),
)
);
}
}
Column has property 'mainAxisSize', setting that to MainAxisSize.min will solve the problem.
Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: (MediaQuery.of(context).size.height-appbar.preferredSize.height)*0.40 ,
color: Colors.green,
),
In this case Column just stretches to infinity as ScrollView above allows it.
I got my answer from stack overflows history ....
here what I missed to deduct status bar height
height: (MediaQuery.of(context).size.height-appbar.preferredSize.height-MediaQuery.of(context).viewPadding.top)*0.60 ,
I need to fix a minimum width to my Column Widgets. Inside each of them, I have Text Widgets which can be very short or very long. I need to fix a minimum width to them in order to have an acceptable size of Column even if the text is short. The other Column need obviously to adapt himself.
Row(children: [
Column(
children: [
Container(
constraints: BoxConstraints(minWidth: 80), // do not work
child: Text("short text"),
),
],
),
Column(
children: [
Container(
constraints: BoxConstraints(minWidth: 110), // do not work
child: RichText(
text: TextSpan(
text:"very very longggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg text")),
),
],
),
],
)
There's probably a dozen ways to do what you want. And likely none of them straightforward or easy to understand. (The subject of constraints & sizes is quite complicated. See this constraints page for more examples & explanations.)
Here's one potential solution.
This will set a minimum width for the blue column (based on stepWidth), but will expand/grow if the text (child) inside wants to.
The yellow column will resize to accommodate the blue column.
class ExpandedRowPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Expanded Row Page'),
),
body: SafeArea(
child: Center(
child: Row(
children: [
IntrinsicWidth(
stepWidth: 100,
// BLUE Column
child: Container(
color: Colors.lightBlueAccent,
child: Column(
children: [
//Text('Short'),
Text('shrt')
],
)
),
),
// YELLOW Column
Flexible(
child: Container(
alignment: Alignment.center,
color: Colors.yellow,
child: Column(
children: [
Text('Very lonnnnnnnnnnnnnnnnnnnnnnnnnnnng texttttttttttttt'),
],
)
),
)
],
)
),
),
);
}
}
You could do the above without a Flexible yellow column, but a very long text child would cause an Overflow warning without a Flexible or Expanded wrapping widget.
A Row widget by itself has an infinite width constraint. So if a child wants to be bigger than screen width, it can, and will cause an overflow. (Try removing Flexible above and rebuild to see.)
Flexible and Expanded, used only inside Row & Column (or Flex, their superclass), checks screen width and other widgets inside a Row, and provides its children with a defined constraint size instead of infinite. Children (inside Flexible/Expanded) can now look up to parent for a constraint and size themselves accordingly.
A Text widget for example, will wrap its text when it's too wide for constraints given by Flexible/Expanded.
use FittedBox();
suppose Example:
Row(
children: [
Column(
children: [
Container(
constraints: BoxConstraints(minWidth: 80), // do not work
child: Text("short text"),
),
],
),
Column(
children: [
Container(
constraints: BoxConstraints(minWidth: 110), // do not work
child:
FittedBox(
child: RichText(
text: TextSpan(
text:
"very very longggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg text")),
),
),
],
),
],
);
I am trying to create a resume document similar to the attached image. Need some help on top-level layout
Would it be:
container
children
column widget
children
container (header)
container (body)
children
column
children
row (education)
row (experience)
also, how would I get the dotted lines?
Thanks for your help
It would be:
container
children
column widget
children
container (header)
container (body)
child
row
children
column (education)
column (experience)
For Dash Lines, you can use the following Plugin Flutter Dash
Another alternative would be:
column widget
children
Row (header)
Row (body)
children
column (education)
column (experience)
To achieve the exact layout in the body section, you might want to use to Expanded Widget to achieve what you want.
column widget
children
Row (header)
Row (body)
children
Expanded [Flex 1]
child
Container (education)
Expanded [Flex 2]
child
Container (experience)
For Dash to work:
You need to add flutter_dash: ^0.0.1 under dependencies in pubspec.yaml
import 'package:flutter/material.dart';
import 'package:flutter_dash/flutter_dash.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
routes: {
'/': (BuildContext context) => MyApp2(),
},
);
}
}
class MyApp2 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height / 3,
)
],
),
Dash(
direction: Axis.horizontal,
length: MediaQuery.of(context).size.width,
dashLength: 12,
dashColor: Colors.red),
Row(
children: <Widget>[
Expanded(
child: Text('Education'),
flex: 1,
),
Dash(
direction: Axis.vertical,
length: (2 *MediaQuery.of(context).size.height) / 3 - MediaQuery.of(context).padding.top,
dashLength: 12,
dashColor: Colors.red),
Expanded(
child: Text('Experience'),
flex: 2,
),
],
),
],
);
}
}
You can try this too:
...your document...
Container(
child: Column(
children: <Widget>[
Container(
child: ....header....,
),
Container(
...body...
child: Row(
children: <Widget>[
Container(
child: ...education...
),
Container(
child: ...experience...,
),
],
),
),
],
),
);
I have a widget that needs to draw on the remaining height where that widget needs to be drawn in between the top and bottom widget(Bottom widget drawn with bottom center attribute).
Ex:
Container() -- The First container almost take half screen
Container() -- The Second container draw on the bottom of the screen eg: Consider widget as Button
Container() -- The Third Container needs to be drawn in between two containers.
The Expanded widget would work for this scenario where we need to wrap middle widget with it.
Eg:
Expanded(
child: Container(
...
),
),
I know a better method using MediaQuery.of(), where you just put the percentage of the space available that a widget will cover:
final mediaQuery = MediaQuery.of(context);
const SizedBox(height: mediaQuery.size.heigh * [percentage of the screen]
But this way includes AppBar space too. So if you want to exclude it, you should do this:
Create appBar variable:
final PreferredSizeWidget appBar = AppBar(
title: const Text('Personal expensense'),
);
Subtract mediaQuery.size with appBar variable size:
final availableHeight = mediaQuery.size.height -
appBar.preferredSize.height -
mediaQuery.padding.top;
A full example:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
final PreferredSizeWidget appBar = AppBar(
title: const Text('Personal expensense'),
);
final mediaQuery = MediaQuery.of(context);
final availableHeight = mediaQuery.size.height -
appBar.preferredSize.height -
mediaQuery.padding.top;
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SizedBox(
height: availableHeight * 0.4,
child: Container(),
),
SizedBox(
height: availableHeight * 0.3,
child: Container(),
),
SizedBox(
height: availableHeight * 0.3,
child: Container(),
),
],
);
}
}
It happens to be really useful!
If you have something like a Column, you probably want to use the Expanded widget.
Try this code
Column(
children: [
Container(color: Colors.red, height: 100),
Expanded(
child: Container(color: Colors.yellow, height: 100),
),
Container(color: Colors.red, height: 100),
],
)
From the Expanded-class documentation:
A widget that expands a child of a Row, Column, or Flex so that the
child fills the available space.
I am use Flutter for web for make website. I want make webpage scroll when user scroll down like normal website.
I am try use Stack so I can place custom background behind widgets. This background must scroll when user scroll (must stick to widgets in front so background change).
(I cannot set background color using Scaffold because my background is use CustomPainter)
But I want center the widgets on webpage, so I wrap SingleChildScrollView in Center widget. But now on large horizontal screen the CustomPaintWidget() is not fill screen (there is blank space). I have try replace my CustomPaintWidget() with Container to test, but same issue.
Here my code:
Center(
child: SingleChildScrollView(
child:Stack(children: <Widget>[
CustomPaintWidget(),
Widgets(),
],),
Anyone know solution?
How to center widgets but also make background stretch?
Thanks!
SingleChildScrollView by definition shriknwraps it's child.
What you should try is
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: ConstrainedBox(
//Use MediaQuery.of(context).size.height for max Height
constraints: BoxConstraints(minHeight: MediaQuery.of(context).size.height),
child: Center(
child: //Widget,
),
),
);
I think you can try something like:
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
CustomPaintWidget(),
Center(
child: SingleChildScrollView(
child: Widgets(),
),
)
],
));
}
read that post, I think is all you need https://medium.com/#swav.kulinski/spike-parallax-in-flutter-seven-lines-of-code-16a1890d8d32
I know it is too late to answer but s.o may need it in future
You have to use Stack
for instance:
your MainClass:
class _BodyState extends State<Body> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
ScrollViewClass(),
Column(
children: [
//YOUR ITEMS
]),
);
ScrollviewClass:
class ScrollViewClass extends StatefulWidget {
#override
_ScrollViewClassState createState() => _ScrollViewClassState();
}
class _ScrollViewClassState extends State<ScrollViewClass> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
margin: EdgeInsets.only(top: 260, bottom: 100),
child: ListView(
children: [
Container(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: ConstrainedBox(
//Use MediaQuery.of(context).size.height for max Height
constraints: BoxConstraints(
minHeight: MediaQuery.of(context).size.height),
child: Column(
children: [
//ADD YOUR ITEMS LIKE IMAGE, TEXT, CARD ETC...
Center(child: Image.asset('assets/app_name.png')),
Center(child: Image.asset('assets/app_name.png')),
Center(child: Image.asset('assets/app_name.png')),
Center(child: Image.asset('assets/app_name.png')),
Center(child: Text('fdgdfg')),
Center(child: Text('fdgdfg')),
],
)),
),
)
],
),
));
}
}
I know this is not the OP's scenario, but for others - If there is something above your scroll view, using the full height of the page will cause the scrollview to scroll prematurely, because the combined height of the widgets is now greater than the page height. Use LayoutBuilder instead of MediaQuery.of(context).size.height.
LayoutBuilder(builder: ((context, constraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: constraints.maxHeight),
child: Center(child: child)),
);
})