Feat/list tile

demo/lib/components/list_tile.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:mix/mix.dart';
+import 'package:remix_ui/remix_ui.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
+
+@widgetbook.UseCase(
+  name: 'interactive playground',
+  type: RemixListTile,
+)
+Widget buildCheckboxUseCase(BuildContext context) {
+  return Center(
+    child: RemixListTile(
+      leading: RemixAvatar(
+        style: AvatarStyles.base().copyWith(
+          container: Style(
+            height(60),
+            width(60),
+            borderRadius(6),
+            box.color(
+              Colors.black26,
+            ),
+          ),
+        ),
+        child: StyledText(
+          'LF',
+        ),
+      ),
+      title: StyledText(
+        context.knobs.string(
+          label: 'Title',
+          initialValue: 'Title',
+        ),
+      ),
+      subtitle: StyledText(
+        context.knobs.string(
+          label: 'Subtitle',
+          initialValue: 'Subtitle',
+        ),
+      ),
+      trailing: Icon(
+        Icons.arrow_forward_ios,
+        size: 16,
+      ),
+    ),
+  );
+}

demo/lib/main.directories.g.dart

@@ -13,8 +13,9 @@ import 'package:demo/components/avatar.dart' as _i2;
 import 'package:demo/components/badge.dart' as _i3;
 import 'package:demo/components/button.dart' as _i4;
 import 'package:demo/components/checkbox.dart' as _i5;
-import 'package:demo/components/radio.dart' as _i6;
-import 'package:demo/components/switch.dart' as _i7;
+import 'package:demo/components/list_tile.dart' as _i6;
+import 'package:demo/components/radio.dart' as _i7;
+import 'package:demo/components/switch.dart' as _i8;
 import 'package:widgetbook/widgetbook.dart' as _i1;
 
 final directories = <_i1.WidgetbookNode>[
@@ -69,14 +70,26 @@ final directories = <_i1.WidgetbookNode>[
           )
         ],
       ),
+      _i1.WidgetbookFolder(
+        name: 'list_tile',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixListTile',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i6.buildCheckboxUseCase,
+            ),
+          )
+        ],
+      ),
       _i1.WidgetbookFolder(
         name: 'radio',
         children: [
           _i1.WidgetbookLeafComponent(
             name: 'RemixRadio',
             useCase: _i1.WidgetbookUseCase(
               name: 'interactive playground',
-              builder: _i6.buildRadioUseCase,
+              builder: _i7.buildRadioUseCase,
             ),
           )
         ],
@@ -88,7 +101,7 @@ final directories = <_i1.WidgetbookNode>[
             name: 'RemixSwitch',
             useCase: _i1.WidgetbookUseCase(
               name: 'interactive playground',
-              builder: _i7.buildRadioUseCase,
+              builder: _i8.buildRadioUseCase,
             ),
           )
         ],

lib/components/avatar/avatar.dart

@@ -29,17 +29,16 @@ class RemixAvatar extends StatelessWidget
     var styles = style == null ? AvatarStyles.base() : style!;
     styles = styles.applyVariants(variants);
 
-    return styles.container
-        .merge(styles.icon)
-        .merge(styles.label)
-        .merge(styles.image)
-        .merge(
-          Style.create([
-            if (backgroundImage != null) box.decoration.image(backgroundImage!),
-            if (foregroundImage != null)
-              box.foregroundDecoration.image(foregroundImage!),
-          ]),
-        );
+    return Style.combine([
+      styles.container,
+      styles.icon,
+      styles.label,
+      styles.image,
+      if (backgroundImage != null)
+        Style(box.decoration.image(backgroundImage!)),
+      if (foregroundImage != null)
+        Style(box.foregroundDecoration.image(foregroundImage!)),
+    ]);
   }
 
   @override

lib/components/list_tile/list_tile.dart

@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+import 'package:mix/mix.dart';
+
+import 'list_tile.style.dart';
+import '../../utils/component_recipe.dart';
+
+class RemixListTile extends StatelessWidget
+    implements RemixComponentRecipe<ListTileStyles> {
+  const RemixListTile({
+    super.key,
+    this.title,
+    this.subtitle,
+    this.leading,
+    this.trailing,
+    this.style,
+    this.variants = const [],
+  });
+
+  final Widget? title;
+  final Widget? subtitle;
+  final Widget? leading;
+  final Widget? trailing;
+
+  @override
+  final ListTileStyles? style;
+
+  @override
+  final List<Variant> variants;
+
+  ListTileStyles buildStyle(List<Variant> variants) {
+    var styles = style == null ? ListTileStyles.base() : style!;
+    return styles.applyVariants(variants);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final styles = buildStyle(variants);
+
+    return HBox(
+      style: styles.outerRowContainer,
+      children: [
+        if (leading != null) leading!,
+        VBox(
+          style: styles.innerColumnContainer,
+          children: [
+            if (title != null)
+              MixProvider.build(
+                context,
+                style: styles.title,
+                builder: (mix) => title!,
+              ),
+            if (subtitle != null)
+              MixProvider.build(
+                context,
+                style: styles.subtitle,
+                builder: (mix) => subtitle!,
+              ),
+          ],
+        ),
+        const Spacer(),
+        if (trailing != null) trailing!,
+      ],
+    );
+  }
+}

lib/components/list_tile/list_tile.style.dart

@@ -0,0 +1,85 @@
+import 'package:flutter/material.dart';
+import 'package:mix/mix.dart';
+
+class ListTileStyles extends StyleRecipe<ListTileStyles> {
+  const ListTileStyles({
+    this.outerRowContainer = const Style.empty(),
+    this.innerColumnContainer = const Style.empty(),
+    this.title = const Style.empty(),
+    this.subtitle = const Style.empty(),
+  });
+
+  final Style outerRowContainer;
+  final Style innerColumnContainer;
+  final Style title;
+  final Style subtitle;
+
+  factory ListTileStyles.base() {
+    return ListTileStyles(
+      outerRowContainer: _outerRowContainer(),
+      innerColumnContainer: _innerColumnContainer(),
+      title: _title(),
+      subtitle: _subtitle(),
+    );
+  }
+
+  @override
+  ListTileStyles applyVariants(List<Variant> variants) {
+    return ListTileStyles(
+      outerRowContainer: outerRowContainer.applyVariants(variants),
+      innerColumnContainer: innerColumnContainer.applyVariants(variants),
+      title: title.applyVariants(variants),
+      subtitle: subtitle.applyVariants(variants),
+    );
+  }
+
+  @override
+  ListTileStyles copyWith({
+    Style? outerRowContainer,
+    Style? innerColumnContainer,
+    Style? title,
+    Style? subtitle,
+  }) {
+    return ListTileStyles(
+      outerRowContainer: this.outerRowContainer.merge(outerRowContainer),
+      innerColumnContainer:
+          this.innerColumnContainer.merge(innerColumnContainer),
+      title: this.title.merge(title),
+      subtitle: this.subtitle.merge(subtitle),
+    );
+  }
+
+  @override
+  ListTileStyles merge(ListTileStyles? other) {
+    return copyWith(
+      outerRowContainer: other?.outerRowContainer,
+      innerColumnContainer: other?.innerColumnContainer,
+      title: other?.title,
+      subtitle: other?.subtitle,
+    );
+  }
+}
+
+Style _outerRowContainer() => Style(
+      flex.gap(16),
+    );
+
+Style _innerColumnContainer() => Style(
+      flex.mainAxisAlignment.center(),
+      flex.mainAxisSize.min(),
+      flex.crossAxisAlignment.start(),
+      flex.gap(4),
+    );
+
+Style _title() => Style.text(
+      text.style.fontSize(14),
+      text.style.fontWeight.w600(),
+      text.style.color.black(),
+    );
+
+Style _subtitle() => Style.text(
+      text.style.fontSize(14),
+      text.style.fontWeight.normal(),
+      text.style.color.grey(),
+      text.maxLines(2),
+    );

lib/remix_ui.dart

@@ -16,3 +16,5 @@ export 'components/avatar/avatar.dart';
 export 'components/avatar/avatar.style.dart';
 export 'components/badge/badge.dart';
 export 'components/badge/badge.style.dart';
+export 'components/list_tile/list_tile.dart';
+export 'components/list_tile/list_tile.style.dart';