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.
Related
I use flutter_colorpicker: ^1.0.3 in my project.
I want the widget to be placed on the page without popping up the dialog.
It's difficult to resize the widget and color grid inside.
Like This:
I tried wrapping with container and SizedBox, but the result is not what I expected.
My expecting:
The grids are smaller.
The idea here is to provide a LayoutBuilder to BlockPicker.
I have done minimal code to showcase the UI.
import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
appBarTheme: const AppBarTheme(
backgroundColor: Colors.transparent,
),
useMaterial3: true,
),
home: const ColorPickerExample(),
);
}
}
class ColorPickerExample extends StatelessWidget {
const ColorPickerExample({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Edit'),
leading: IconButton(
onPressed: () {},
icon: const Icon(Icons.arrow_back),
),
),
body: Column(
children: [
Expanded(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
const CircleAvatar(
backgroundImage:
NetworkImage('https://i.pravatar.cc/300?img=30'),
radius: 60,
),
const SizedBox(
width: 30,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text('Herman Yun'),
Divider(),
Text('foobar#example.com')
],
),
],
),
const SizedBox(
height: 15,
),
Text(
'Select a color',
style: Theme.of(context).textTheme.headline5,
textAlign: TextAlign.start,
),
const SizedBox(
height: 5,
),
BlockPicker(
pickerColor: Colors.red,
onColorChanged: (_) {},
layoutBuilder: (context, colors, child) {
return GridView(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
gridDelegate:
const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 100,
childAspectRatio: 1.0,
crossAxisSpacing: 10,
mainAxisExtent: 100,
mainAxisSpacing: 10,
),
children: [for (Color color in colors) child(color)],
);
},
),
],
),
),
),
),
Container(
margin: const EdgeInsets.only(top: 25),
child: ElevatedButton(
onPressed: () {},
child: const SizedBox(
width: double.infinity,
child: Center(child: Text('Save')),
),
),
),
],
),
);
}
}
Is it possible to set the width of a drawer in Flutter to the width of its widetst child to avoid f. e. clipping of the DrawerHeader?
That is what it should look like:
green is the screen, grey the drawer
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(),
drawer: Container(
color: Colors.grey,
padding: EdgeInsets.symmetric(horizontal: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SafeArea(
child: Container(
padding: EdgeInsets.symmetric(vertical: 24),
child: Text('User name'),
),
),
Text('Text'),
Text(
'Long loong looooooong very very very long text',
maxLines: 1,
),
],
),
),
),
);
}
}
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'),
),
),
],
))
],
),
),
);
}));
}
}
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')),
],
),
)
],
),
),
),
),
],
),
),
),
);
}
}
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"),
),
],
),
),
)