Skip to content

Commit

Permalink
SideBySide comparison.
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcglasberg
marcglasberg committed Jan 6, 2025
1 parent cdfe21d commit 0e2ee90
Show file tree
Hide file tree
Showing 4 changed files with 367 additions and 165 deletions.
14 changes: 8 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,17 @@ widgets.</sub>
The `SideBySide` widget arranges it children widgets horizontally,
achieving a layout that is not possible with `Row` or `RowSuper` widgets.

* The first widget in its `children` will be on the left, and will occupy as much
horizontal space as it wants, up to the available horizontal space. Then, the
next widget will be displayed to the right of the previous widget, and so on,
one by one, until they run out of available space. After the available space
is occupied, the widgets that did not fit will not be displayed (or, more
precisely, will be sized as `0` width).
The first widget in its `children` will be on the left, and will occupy as much
horizontal space as it wants, up to the available horizontal space. Then, the
next widget will be displayed to the right of the previous widget, and so on,
one by one, until they run out of available space. After the available space
is occupied, the widgets that did not fit will not be displayed (or, more
precisely, will be sized as `0` width).

### Why this layout is not possible with a `Row`?

![](https://github.com/marcglasberg/assorted_layout_widgets/blob/master/example/lib/images/sideBySideComparison.gif)

Suppose you want to display two texts is a row, such as they occupy the
available space: `Row(children: [Text("One"), Text("Two")])`. If the available
horizontal space is not enough, the texts will overflow. You can fix this by
Expand Down
Binary file added example/lib/images/sideBySideComparison.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
206 changes: 47 additions & 159 deletions example/lib/main_side_by_side.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,6 @@ void main() => runApp(const MaterialApp(home: Demo()));
class Demo extends StatelessWidget {
const Demo({super.key});

static const w1 = Text(
"Hello there!",
style: TextStyle(color: Colors.red),
overflow: TextOverflow.ellipsis,
);

static const w2 = Text(
"How are you doing",
style: TextStyle(color: Colors.blue),
overflow: TextOverflow.ellipsis,
);

@override
Widget build(BuildContext context) {
//
Expand All @@ -39,8 +27,6 @@ class Demo extends StatelessWidget {
//
// Uncomment to see the deprecated examples:
// _deprecated(),
//
_comparison(),
],
),
),
Expand All @@ -49,28 +35,70 @@ class Demo extends StatelessWidget {
);
}

Widget _titleWithDivider(String text) {
return SideBySide(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
text,
textWidthBasis: TextWidthBasis.longestLine,
style: const TextStyle(fontSize: 22),
),
const Divider(color: Colors.grey, height: 30),
],
gaps: [8],
minEndChildWidth: 20,
);
}

Widget _exampleTitleAndDivider() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_titleWithDivider("First Chapter"),
const Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit."),
const Box(height: 24),
//
_titleWithDivider("Second Chapter"),
const Text(
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."),
const Box(height: 24),
//
_titleWithDivider("Another chapter with long name"),
const Text(
"Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur."),
const Box(height: 24),
//
_titleWithDivider("Another chapter with an extremely long chapter name"),
const Text("Ut enim ad minima veniam, quis nostrum exercitationem ullam? "),
//
const Divider(height: 48),
],
);
}

Widget _deprecated() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text("Deprecated"),
const Text("SideBySide(minEndChildWidth: 0, innerDistance: 20)"),
for (double width = 380; width >= 0; width -= 40)
_sideBySideWithStartChildAndEndChild(
_deprecatedStartChildAndEndChild(
width: width, minEndChildWidth: 0, innerDistance: 20),
//
const Box(height: 16),
const Text("Deprecated"),
const Text("SideBySide(minEndChildWidth: 130, innerDistance: 20)"),
for (double width = 380; width >= 0; width -= 40)
_sideBySideWithStartChildAndEndChild(
_deprecatedStartChildAndEndChild(
width: width, minEndChildWidth: 130, innerDistance: 20),
//
const Box(height: 16),
const Text("Deprecated"),
const Text("SideBySide(minEndChildWidth: 50, innerDistance: 20)"),
for (double width = 380; width >= 0; width -= 40)
_sideBySideWithStartChildAndEndChild(
_deprecatedStartChildAndEndChild(
width: width, minEndChildWidth: 50, innerDistance: 20),
//
const Divider(height: 48),
Expand Down Expand Up @@ -144,11 +172,7 @@ class Demo extends StatelessWidget {
const Text("SideBySide.list(minEndChildWidth: 50, innerDistance: 20)"),
for (double width = 380; width >= 0; width -= 40)
_sideBySide(
texts: [
"Hello there",
"How are you doingabcdefghijkl?",
"I'm good, thank you!"
],
texts: ["Hello there", "How are you doing?", "I'm good, thank you!"],
width: width,
minEndChildWidth: 50,
),
Expand Down Expand Up @@ -198,7 +222,7 @@ class Demo extends StatelessWidget {
}

/// This is deprecated.
Widget _sideBySideWithStartChildAndEndChild({
Widget _deprecatedStartChildAndEndChild({
required double width,
required double minEndChildWidth,
required double innerDistance,
Expand Down Expand Up @@ -232,142 +256,6 @@ class Demo extends StatelessWidget {
);
}

Widget _titleWithDivider(String text) {
return SideBySide(
crossAxisAlignment: CrossAxisAlignment.start,
startChild: Text(
text,
textWidthBasis: TextWidthBasis.longestLine,
style: const TextStyle(fontSize: 22),
),
endChild: const Divider(color: Colors.grey, height: 30),
innerDistance: 8,
minEndChildWidth: 20,
);
}

Widget _comparison() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text("Comparing Row and SideBySide", style: TextStyle(fontSize: 18)),
const Box(height: 16),
//
const Text("Row(children: [w1, w2])"),
const Text("With `width: 120` it overflows"),
Box(
color: Colors.grey[300],
width: 120,
child: const Row(
children: [w1, w2],
),
),
//
const Box(height: 65),
const Text("Row(children: [w1, w2])"),
const Text("With `width: 300` works fine, but only because it fits"),
Box(
color: Colors.grey[300],
width: 300,
child: const Row(
children: [w1, w2],
),
),
//
const Box(height: 40),
const Text("Row(children: [Expanded(w1), Expanded(w2)]) - width: 120"),
const Text("With `width: 120` will each get `60px`"),
Box(
color: Colors.grey[300],
width: 120,
child: const Row(
children: [Expanded(child: w1), Expanded(child: w2)],
),
),
//
const Box(height: 30),
const Text("Row(children: [Expanded(w1), Expanded(w2)])"),
const Text("With `width: 300` will each get `150px`"),
Box(
color: Colors.grey[300],
width: 300,
child: const Row(
children: [Expanded(child: w1), Expanded(child: w2)],
),
),
//
const Box(height: 30),
const Text("Row(children: [Flexible(w1), Flexible(w2)])"),
const Text("With `width: 120` will each get `60px`"),
Box(
color: Colors.grey[300],
width: 120,
child: const Row(
children: [Flexible(child: w1), Flexible(child: w2)],
),
),
//
const Box(height: 30),
const Text("Row(children: [Flexible(w1), Flexible(w2)])"),
const Text("With `width: 300` works fine, but only because it fits"),
Box(
color: Colors.grey[300],
width: 300,
child: const Row(
children: [Flexible(child: w1), Flexible(child: w2)],
),
),
//
const Box(height: 30),
const Text("SideBySide(children: [w1, w2])"),
const Text("With `width: 120` works fine when it doesn't fit"),
Box(
color: Colors.grey[300],
width: 120,
child: SideBySide(children: [w1, w2]),
),
//
const Box(height: 30),
const Text("SideBySide(children: [Flexible(w1), Flexible(w2)])"),
const Text("With `width: 300` works fine when it fits"),
Box(
color: Colors.grey[300],
width: 300,
child: SideBySide(children: [w1, w2]),
),
//
const Box(height: 30),
const Divider(height: 48),
],
);
}

Widget _exampleTitleAndDivider() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_titleWithDivider("First Chapter"),
const Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit."),
const Box(height: 24),
//
_titleWithDivider("Second Chapter"),
const Text(
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."),
const Box(height: 24),
//
_titleWithDivider("Another chapter with long name"),
const Text(
"Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur."),
const Box(height: 24),
//
_titleWithDivider("Another chapter with an extremely long chapter name"),
const Text("Ut enim ad minima veniam, quis nostrum exercitationem ullam? "),
//
const Divider(height: 48),
],
);
}

/// Note: Using a [Row] doesn't work. Uncomment to try it:
/// Widget _titleWithDivider(String text) {
/// //
Expand Down
Loading

0 comments on commit 0e2ee90

Please sign in to comment.