From e7c9f641d55620e59349ab214b743edb567a5695 Mon Sep 17 00:00:00 2001 From: J-P Nurmi Date: Fri, 11 Nov 2022 16:42:31 +0100 Subject: [PATCH 1/2] YaruSection: replace headline & headerWidget with a single title widget It's easy enough to wrap stuff into a Row when needed, and then you'll have full control over the main & cross axis alignment etc. ;-) --- example/lib/pages/carousel_page.dart | 4 +-- example/lib/pages/section_page.dart | 15 ++++++---- lib/src/pages/yaru_section.dart | 42 ++++++++++------------------ 3 files changed, 27 insertions(+), 34 deletions(-) diff --git a/example/lib/pages/carousel_page.dart b/example/lib/pages/carousel_page.dart index e41f8e155..2f2cff47e 100644 --- a/example/lib/pages/carousel_page.dart +++ b/example/lib/pages/carousel_page.dart @@ -25,7 +25,7 @@ class _CarouselPageState extends State { padding: const EdgeInsets.all(kYaruPagePadding), children: [ YaruSection( - headline: const Text('Auto scroll: off'), + title: const Text('Auto scroll: off'), width: 700, child: YaruCarousel( children: _getCarouselChildren(), @@ -35,7 +35,7 @@ class _CarouselPageState extends State { ), const SizedBox(height: 20), YaruSection( - headline: const Text('Auto scroll: on'), + title: const Text('Auto scroll: on'), width: 700, child: YaruCarousel( controller: _autoScrollController, diff --git a/example/lib/pages/section_page.dart b/example/lib/pages/section_page.dart index e40b44460..87d8c579e 100644 --- a/example/lib/pages/section_page.dart +++ b/example/lib/pages/section_page.dart @@ -45,11 +45,16 @@ class DummySection extends StatelessWidget { @override Widget build(BuildContext context) { return YaruSection( - headline: const Text('Headline'), - headerWidget: const SizedBox( - child: YaruCircularProgressIndicator(strokeWidth: 3), - height: 20, - width: 20, + title: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: const [ + Text('Headline'), + SizedBox( + child: YaruCircularProgressIndicator(strokeWidth: 3), + height: 20, + width: 20, + ) + ], ), child: const YaruTile( title: Text('Title'), diff --git a/lib/src/pages/yaru_section.dart b/lib/src/pages/yaru_section.dart index 3ca2718ed..174d746c8 100644 --- a/lib/src/pages/yaru_section.dart +++ b/lib/src/pages/yaru_section.dart @@ -6,17 +6,17 @@ class YaruSection extends StatelessWidget { /// [Widgets] as children. const YaruSection({ super.key, - this.headline, + this.title, required this.child, this.width, this.height, - this.headerWidget, this.padding = const EdgeInsets.all(8.0), + this.titlePadding = const EdgeInsets.all(8.0), this.margin, }); - /// Widget that is placed above the list of `children`. - final Widget? headline; + /// Widget that is placed above the `child`. + final Widget? title; /// The child widget inside the section. final Widget child; @@ -27,16 +27,13 @@ class YaruSection extends StatelessWidget { /// Specifies the [height] of the section. final double? height; - /// Aligns the widget horizontally along with headline. - /// - /// Both `headline` and `headerWidget` will be aligned horizontally - /// with [mainAxisAlignment] as [MainAxisAlignment.spaceBetween]. - final Widget? headerWidget; - /// The padding between the section border and its [child] which defaults to - /// `EdgeInsets.only(all: 8.0)`. + /// `EdgeInsets.all(8.0)`. final EdgeInsets padding; + /// The padding around the [title] which defaults to `EdgeInsets.all(8.0)`. + final EdgeInsets titlePadding; + /// An optional margin around the section border. final EdgeInsets? margin; @@ -48,25 +45,16 @@ class YaruSection extends StatelessWidget { padding: padding, margin: margin, child: Column( + crossAxisAlignment: CrossAxisAlignment.start, children: [ - Padding( - padding: EdgeInsets.all(headline != null ? 8.0 : 0), - child: Align( - alignment: Alignment.topLeft, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - if (headline != null) - DefaultTextStyle( - style: Theme.of(context).textTheme.titleLarge!, - textAlign: TextAlign.left, - child: headline!, - ), - headerWidget ?? const SizedBox() - ], + if (title != null) + Padding( + padding: titlePadding, + child: DefaultTextStyle( + style: Theme.of(context).textTheme.titleLarge!, + child: title!, ), ), - ), child, ], ), From fb19f635f53528be4614d5ccc19690b576032db5 Mon Sep 17 00:00:00 2001 From: J-P Nurmi Date: Fri, 11 Nov 2022 17:38:25 +0100 Subject: [PATCH 2/2] Rename title back to headline --- example/lib/pages/carousel_page.dart | 4 ++-- example/lib/pages/section_page.dart | 2 +- lib/src/pages/yaru_section.dart | 16 ++++++++-------- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/example/lib/pages/carousel_page.dart b/example/lib/pages/carousel_page.dart index 2f2cff47e..e41f8e155 100644 --- a/example/lib/pages/carousel_page.dart +++ b/example/lib/pages/carousel_page.dart @@ -25,7 +25,7 @@ class _CarouselPageState extends State { padding: const EdgeInsets.all(kYaruPagePadding), children: [ YaruSection( - title: const Text('Auto scroll: off'), + headline: const Text('Auto scroll: off'), width: 700, child: YaruCarousel( children: _getCarouselChildren(), @@ -35,7 +35,7 @@ class _CarouselPageState extends State { ), const SizedBox(height: 20), YaruSection( - title: const Text('Auto scroll: on'), + headline: const Text('Auto scroll: on'), width: 700, child: YaruCarousel( controller: _autoScrollController, diff --git a/example/lib/pages/section_page.dart b/example/lib/pages/section_page.dart index 87d8c579e..270e63436 100644 --- a/example/lib/pages/section_page.dart +++ b/example/lib/pages/section_page.dart @@ -45,7 +45,7 @@ class DummySection extends StatelessWidget { @override Widget build(BuildContext context) { return YaruSection( - title: Row( + headline: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: const [ Text('Headline'), diff --git a/lib/src/pages/yaru_section.dart b/lib/src/pages/yaru_section.dart index 174d746c8..bb8e2f7ea 100644 --- a/lib/src/pages/yaru_section.dart +++ b/lib/src/pages/yaru_section.dart @@ -6,17 +6,17 @@ class YaruSection extends StatelessWidget { /// [Widgets] as children. const YaruSection({ super.key, - this.title, + this.headline, required this.child, this.width, this.height, this.padding = const EdgeInsets.all(8.0), - this.titlePadding = const EdgeInsets.all(8.0), + this.headlinePadding = const EdgeInsets.all(8.0), this.margin, }); /// Widget that is placed above the `child`. - final Widget? title; + final Widget? headline; /// The child widget inside the section. final Widget child; @@ -31,8 +31,8 @@ class YaruSection extends StatelessWidget { /// `EdgeInsets.all(8.0)`. final EdgeInsets padding; - /// The padding around the [title] which defaults to `EdgeInsets.all(8.0)`. - final EdgeInsets titlePadding; + /// The padding around the [headline] which defaults to `EdgeInsets.all(8.0)`. + final EdgeInsets headlinePadding; /// An optional margin around the section border. final EdgeInsets? margin; @@ -47,12 +47,12 @@ class YaruSection extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - if (title != null) + if (headline != null) Padding( - padding: titlePadding, + padding: headlinePadding, child: DefaultTextStyle( style: Theme.of(context).textTheme.titleLarge!, - child: title!, + child: headline!, ), ), child,