Flutter - Vertical Divider and Horizontal Divider
FlutterDartFlutter LayoutFlutter Problem Overview
Flutter Solutions
Solution 1 - Flutter
Not as far as I know. However, it is quite simple to create one — if you look at the source for Flutter's Divider you'll see that it is simply a SizedBox
with a single (bottom) border. You could do the same but with dimensions switched.
Update (Oct 4, 2018): a VerticalDivider
implementation has been merged in by the Flutter team. Check out the docs but it's very simple to use — simply put it between two other items in a row.
Note: If you are using VerticalDivider
as separator in Row
widget then wrap Row
with IntrinsicHeight
, Container
or SizedBox
else VerticalDivider
will not show up. For Container
and SizedBox
widget you need define height
.
Solution 2 - Flutter
As of 10 days ago, flutter has merged a VerticalDivider
implementation. It will be available in the default channel very soon, but for now you have to switch to the dev channel to use it: flutter channel dev
.
Here is a example of how to use it:
IntrinsicHeight(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('Foo'),
VerticalDivider(),
Text('Bar'),
VerticalDivider(),
Text('Baz'),
],
))
Solution 3 - Flutter
Vertical divider:
-
As a direct child:
VerticalDivider( color: Colors.black, thickness: 2, )
-
In a
Row
:IntrinsicHeight( child: Row( children: [ Text('Hello'), VerticalDivider( color: Colors.black, thickness: 2, ), Text('World'), ], ), )
Horizontal divider:
Solution 4 - Flutter
import 'package:flutter/material.dart';
class VerticalDivider extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Container(
height: 30.0,
width: 1.0,
color: Colors.white30,
margin: const EdgeInsets.only(left: 10.0, right: 10.0),
);
}
}
Solution 5 - Flutter
Try to wrap it inside the Container
with some height as
Container(height: 80, child: VerticalDivider(color: Colors.red)),
Solution 6 - Flutter
Tried with VerticalDivider()
but cannot get any divider. I Solved it with
Container(color: Colors.black45, height: 50, width: 2,),
Solution 7 - Flutter
You can use a vertical divider with a thickness of 1.
VerticalDivider(
thickness: 1,
color: Color(0xFFF6F4F4),
),
And if you can't see the vertical divider wrap the row with a IntrinsicHeight widget.
Solution 8 - Flutter
As @rwynnchristian suggested, this seems to be the simplest solution IMO. Just leaving the code here:
import 'package:flutter/material.dart';
class VerticalDivider extends StatelessWidget {
@override
Widget build(BuildContext context) => RotatedBox(
quarterTurns: 1,
child: Divider(),
);
}
Solution 9 - Flutter
add this method anywhere.
_verticalDivider() => BoxDecoration(
border: Border(
right: BorderSide(
color: Theme.of(context).dividerColor,
width: 0.5,
),
),
);
now wrap your content in container
Container(
decoration: _verticalDivider(),
child: //your widget code
);
Solution 10 - Flutter
Use Container for divider is easy, wrap your row in IntrinsicHeight()
IntrinsicHeight(
child: Row(
children: [
Text(
'Admissions',
style: TextStyle(fontSize: 34),
),
Container(width: 1, color: Colors.black), // This is divider
Text('another text'),
],
),
Solution 11 - Flutter
Just wrap your Row in IntrinsicHeight widget and you should get the desired result:
IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('Name'),
VerticalDivider(),
Text('Contact'),
],
))
Solution 12 - Flutter
Try RotatedBox in combination with a divider to get it vertical, RotatedBox is a widget of flutter that automatically rotates it's child based on the quarterTurn property you have to specify. Head over to here for a detailed explanation https://docs.flutter.io/flutter/widgets/RotatedBox-class.html
Solution 13 - Flutter
You need to wrap VerticalDivider()
widget with the IntrinsicHeight
widget. Otherwise, the vertical divider will not show up. And to gain some padding over the top and bottom you can add indent.
IntrinsicHeight(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: VerticalDivider(
thickness: 0.8,
color: Colors.grey,
),
),
Flexible(
child: Text(
"Random Text",
style: TextStyle(
fontSize: 12,
color: AppColor.darkHintTextColor,),
),
),
],
),
)