Not being able to add vertical line in flutter - flutter

I have the following layout
Form(
onChanged: _updateFormProgress,
child: Row(
children: [
Expanded(
flex: 3,
child: Column(
children: [
....
],
),
),
Expanded(
flex: 2,
child: Column(
children: [
...
],
),
)
],
),
);
I need a vertical separator line beteen the two Expanded
I tried:
Form(
onChanged: _updateFormProgress,
child: Row(
children: [
Expanded(
flex: 3,
child: Column(
children: [
....
],
),
),
Container(
child: VerticalDivider(
color: Colors.red,
width: 1,
)
),
Expanded(
flex: 2,
child: Column(
children: [
...
],
),
)
],
),
);
And it compiles but I can't see the line. I also tried other options like wrapping the Expanded in a Container and make a border but have different issues with that

I changed code like tree you provide, and change it to work.
Please wrap 'Row' with 'IntrinsicHeight'.
I attached full code I tested.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: EdgeInsets.all(10),
child: Center(
child: Column(
children: [
Container(
child: Form(
onChanged: () {},
child: IntrinsicHeight(
child: Row(
children: [
Expanded(
flex: 3,
child: Column(
children: [
Container(child: Text('a')),
Container(child: Text('a')),
Container(child: Text('a')),
],
),
),
Container(
child: VerticalDivider(
color: Colors.red,
width: 1,
),
),
Expanded(
flex: 2,
child: Column(
children: [
Container(child: Text('a')),
Container(child: Text('a')),
Container(child: Text('a')),
],
),
)
],
),
),
),
),
],
),
),
),
);
}
}

Related

How to make the children in the stack equal in height in flutter?

How to make the children in the stack equal in height in flutter? The container below is the automatic height, I need to set the height of the upper container according to the height of the lower container.
Why do I need this?
Because I want to implement a background progress bar.
return Stack(
children: [,
Container(
//how to auto set this widget equal height to below.
height:?
),
Container(
child: Column(
children: [
Text("a"),
Text("b"),
Text("c"),
//maybe more widgets..
],
),
),
],
);
Just wrap your Stack widget with IntrinsicHeight widget.
This will make each of the children of the Stack widget occupy the height of the largest child. So. all children will be of equal height.
As per the example you shared:
return IntrinsicHeight(
child: Stack(
children: [,
Container(
child: SomeWidget(),
),
Container(
child: Column(
children: [
Text("a"),
Text("b"),
Text("c"),
//maybe more widgets..
],
),
),
],
)
);
I found the solution based on #JaisonThomas' comment.
return Stack(
children: [
Positioned.fill(
child: LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {
return Container(
child: Row(
children: [
Container(
width: constraints.maxWidth * _progress,
color: statusColor,
),
],
),
);
}),
),
Container(
child: Column(
children: [
Text("a"),
Text("b"),
Text("c"),
//maybe more widgets..
],
),
),
],
);
Although there is a good solution that made by 'noveleven',
I implemented by using 'addPostFrameCallback' and 'key'.
(I added a background color for distinguish Widget.)
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
GlobalKey _key = GlobalKey();
double _sizeOfColumn = 0.0;
#override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
setState(() {
_sizeOfColumn = _key.currentContext.size.height;
});
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: _buildBody(),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
Widget _buildBody() {
return Stack(
children: [
Container(
color: Colors.grey,
height: _sizeOfColumn,
),
Container(
key: _key,
color: Colors.yellow,
child: Column(
mainAxisSize: MainAxisSize.min,
// crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text("a"),
Text("b"),
Text("c"),
Text("a"),
Text("b"),
Text("c"),
//maybe more widgets..
],
),
),
],
);
}
}

How to make this in Flutter i am new in flutter so if anyone knows

I want one row with this one big image on left and two images on right with one up and the second down.
thanks in advance if Someone can help!!
The key insight is to break the layout into nested rows and/or columns. Check out this example,
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatefulWidget {
#override
_AppState createState() => _AppState();
}
class _AppState extends State<App> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.white,
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: getContainer(Colors.green),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: getContainer(Colors.yellow),
),
Expanded(
child: getContainer(Colors.red),
)
],
),
),
],
),
),
);
}
}
Widget getContainer(MaterialColor color) =>
Container(height: 50, width: 50, color: color);
Everything is contained in one row, the first column will be larger than the second one with the widget Expanded flex :1. In the second column, there's a column widget with that you'll have two rows for your image.
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Row(
children: [
Expanded(
child: SizedBox(
child: Image.asset('your large image'),
),
flex: 1,
),
Expanded(
child: Column(
children: [
Image.asset('your second image'),
Image.asset('your third image'),
],
),
flex: 0,
)
],
),
),
);
}
}
solved
**here is the example **
import 'package:flutter/material.dart';
class BagScreen extends StatelessWidget {
const BagScreen({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
// color: Colors.red,
height: 400,
width: 400,
child: Row(
children: [
Container(
child: Image.asset(
"assets/images/bgimage.PNG",
fit: BoxFit.contain,
width: 250.0,
// height: 350.0,
),
),
SizedBox(
width: 10.0,
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
SizedBox(
height: 10.0,
),
Container(
child: Image.asset("assets/images/upsm.PNG"),
),
Container(
child: Image.asset("assets/images/upsm.PNG"),
),
],
)
],
),
),
),
);
}
}

How to use FractionallySizedBox in Column with Scroll?

I have a simple layout in my flutter app:
Scaffold(
resizeToAvoidBottomInset: true,
appBar: AppBar(centerTitle: true, title: Text('test')),
body: SingleChildScrollView(
child: Column(
children: [
Expanded(
flex: 7,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
FractionallySizedBox(
widthFactor: 0.55,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: TextField(),
),
),
SizedBox(
height: 15,
),
],
),
),
Expanded(
child: Column(
children: [
Text('some text'),
FractionallySizedBox(
widthFactor: 0.55,
child: RaisedButton(
child: Text('Hello'),
),
),
],
))
],
),
),
);
It works but without SingleChildScrollView. With SingleChildScrollView I have error:
RenderBox was not laid out: RenderRepaintBoundary#0b8c5 relayoutBoundary=up1 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
I need the field and the button to occupy the same width - for this I use FractionallySizedBox.
Also I need to split the screen proportionally (in height) - for this I use Expanded with Flex.
But I also need scrolling when the keyboard appears. If I use SingleChildScrollView it gives an error. Perhaps this is not the best way - I would be grateful for any advice.
I have used several options but I get this error. How can this be fixed?
You can copy paste run full code below
Step 1: Use LayoutBuilder wrap SingleChildScrollView and ConstrainedBox
Step 2: RaisedButton use Expanded
You can see working demo below
code snippet
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: constraints.copyWith(
maxHeight: constraints.maxHeight,
),
child: Column(
...
Expanded(
flex: 3,
child: RaisedButton(
onPressed: () {
print("hi");
working demo
full code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
//resizeToAvoidBottomInset: true,
appBar: AppBar(centerTitle: true, title: Text('test')),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: constraints.copyWith(
maxHeight: constraints.maxHeight,
),
child: Column(
children: [
Expanded(
flex: 7,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
FractionallySizedBox(
widthFactor: 0.55,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: TextField(),
),
),
SizedBox(
height: 15,
),
],
),
),
Expanded(
child: Column(
children: [
Text('some text'),
Expanded(
flex: 3,
child: RaisedButton(
onPressed: () {
print("hi");
},
child: Text('Hello'),
),
),
],
))
],
),
),
);
}));
}
}

How to add a tab inside a column widget on flutter

My goal is to add a tab inside a colum, and add more widgets on this column.
But when i'm adding a tab, i'm getting an error of
Horizontal viewport was given unbounded height.
Viewports expand in the cross axis to fill their container and constrain their children to
match their extent in the cross axis. In this case, a horizontal viewport was given an
unlimited amount of vertical space in which to expand.
Any suggestions what i'm doing wrong? Thanks!
Here is my sample code
import 'package:flutter/material.dart';
import 'package:trip_finder/screens/home_screen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Trip Finder',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primaryColor: Color(0xFF131415),
primaryColorLight: Color(0xFF8296ab),
highlightColor: Color(0xFF47bee1),
scaffoldBackgroundColor: Color(0xFFf0f1f1)
),
// home: HomeScreen(),
home: TestScreen(),
);
}
}
class TestScreen extends StatefulWidget {
#override
_TestScreenState createState() => _TestScreenState();
}
class _TestScreenState extends State<TestScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
_tabSection(),
],
),
)
);
}
}
Widget _tabSection() {
return DefaultTabController(
length: 3,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
child: TabBar(tabs: [
Tab(text: "Home"),
Tab(text: "Articles"),
Tab(text: "User"),
]),
),
Container(
child: TabBarView(children: [
Container(
child: Text("Home Body"),
),
Container(
child: Text("Articles Body"),
),
Container(
child: Text("User Body"),
),
]),
),
],
),
);
}
You can add height to your TabBarView. Code:
import 'package:flutter/material.dart';
class TestScreen extends StatefulWidget {
#override
_TestScreenState createState() => _TestScreenState();
}
class _TestScreenState extends State<TestScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
_tabSection(context),
],
),
));
}
}
Widget _tabSection(BuildContext context) {
return DefaultTabController(
length: 3,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
child: TabBar(tabs: [
Tab(text: "Home"),
Tab(text: "Articles"),
Tab(text: "User"),
]),
),
Container(
//Add this to give height
height: MediaQuery.of(context).size.height,
child: TabBarView(children: [
Container(
child: Text("Home Body"),
),
Container(
child: Text("Articles Body"),
),
Container(
child: Text("User Body"),
),
]),
),
],
),
);
}
You can also wrap inside Flexible.
Flexible(
child: Container(
child: TabBarView(
children: [
Container(
child: Text("Home Body"),
),
Container(
child: Text("Articles Body"),
),
Container(
child: Text("User Body"),
),
],
),
),
)

Flutter Layout: VerticalDividers not shown

I have a simple layout that consists of one Column with few children. Some of these are Rows which contain children either. I've added Dividers between the children of the Column and VerticalDividers between the children of the Rows. The (horizontal) Dividers are shown fine. However the VerticalDividers are not shown in the app.
I have already tried wrapping the Rows children in some other layout widget like Container, but nothing seems to work.
Screenshot
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Test App'),
),
body: Column(
children: <Widget>[
Expanded(
child: Center(
child: Text('Hello World'),
),
),
Divider(height: 1),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(40.0),
child: Text('Row 1.1'),
),
VerticalDivider(width: 1),
Padding(
padding: const EdgeInsets.all(40.0),
child: Text('Row 1.2'),
),
],
),
Divider(height: 1),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(40.0),
child: Text('Row 2.1'),
),
VerticalDivider(width: 1),
Padding(
padding: const EdgeInsets.all(40.0),
child: Text('Row 2.2'),
),
],
)
],
),
);
}
}
just wrap Rows with IntrinsicHeight widget
your example will looks like
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Test App'),
),
body: Column(
children: <Widget>[
Expanded(
child: Center(
child: Text('Hello World'),
),
),
Divider(height: 1),
IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(40.0),
child: Text('Row 1.1'),
),
VerticalDivider(width: 1),
Padding(
padding: const EdgeInsets.all(40.0),
child: Text('Row 1.2'),
),
],
),
),
Divider(height: 1),
IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(40.0),
child: Text('Row 2.1'),
),
VerticalDivider(width: 1),
Padding(
padding: const EdgeInsets.all(40.0),
child: Text('Row 2.2'),
),
],
),
)
],
),
);
}
}
Try this:
Container(
height: 20,
child: VerticalDivider(
width: 20
color: Colors.black,
),
),
It worked for me.