Skip to content

Commit

Permalink
FIX: #224
Browse files Browse the repository at this point in the history
  • Loading branch information
@rydmike
rydmike committed Mar 12, 2024
1 parent 9a194de commit 1145f40
Show file tree
Hide file tree
Showing 7 changed files with 207 additions and 136 deletions.
11 changes: 7 additions & 4 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ All changes to the **FlexColorScheme** (FCS) package are documented here.

## 7.4.0 - WIP

**March 10, 2024**
**March 12, 2024**

**PACKAGE**
- Chore: Version bumps for Flutter 3.19
Expand Down Expand Up @@ -77,16 +77,19 @@ POSTPONED TO Version 8.0.0

**FIX**

- Fixed [#188](https://github.com/rydmike/flex_color_scheme/issues/188) add info about theme simulator being an approximation.
- Fixed [#200](https://github.com/rydmike/flex_color_scheme/issues/200) FAB config code for `fabSchemeColor: SchemeColor.secondary` selection was not generated.

- Fixed [#188](https://github.com/rydmike/flex_color_scheme/issues/188) add info about theme simulator being an approximation.
- Fixed [#200](https://github.com/rydmike/flex_color_scheme/issues/200) FAB config code for `fabSchemeColor: SchemeColor.secondary` selection was not generated.
- Fixed [#222](https://github.com/rydmike/flex_color_scheme/issues/222) PersistentBottomSheetController's type in Example 5/Playground.
- Chore: Update issue resolution status texts for Dialogs.
- Chore: Update issue resolution status texts for Dialogs.

**Feature**
- Add #224](https://github.com/rydmike/flex_color_scheme/issues/224) add `Card.filled` and `Card.outlined` to widget showcase. Also use them in Card settings page for card presentation.
- Split FAB and Chip to separate panels.

**TODO THEMES PLAYGROUND AND EXAMPLES**

- Add info about Card theming issue to the Card settings screen. After filing the Flutter issue.
- Add UI and code gen for dense input decorator.
- Add UI for content padding on input decorator.
- Make Chips presentation better.
Expand Down
6 changes: 4 additions & 2 deletions example/lib/example5_themes_playground/widgets/panels/card_settings/card_settings.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,10 +109,12 @@ class CardSettings extends StatelessWidget {
),
),
),
const Divider(),
const Padding(
padding: EdgeInsets.all(16),
child: CardShowcase(explain: false),
child: CardTypesShowcase(
cardWidth: 140,
showThemedOutline: true,
),
),
],
);
Expand Down
113 changes: 3 additions & 110 deletions ...mes_playground/widgets/panels/theme_simulator/app_example_material3/component_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,13 @@ import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import '../../../../../shared/utils/app_scroll_behavior.dart';
import '../../../../../shared/widgets/universal/showcase_material.dart';

const SizedBox rowDivider = SizedBox(width: 20);
const SizedBox colDivider = SizedBox(height: 10);
const double tinySpacing = 3.0;
const double smallSpacing = 10.0;
const double cardWidth = 115;
// const double cardWidth = 115;
const double widthConstraint = 450;

class FirstComponentList extends StatelessWidget {
Expand Down Expand Up @@ -372,115 +373,7 @@ class Cards extends StatelessWidget {

@override
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
final bool useMaterial3 = theme.useMaterial3;

// (rydmike): To make the by Flutter team made custom outlined Card below
// that is a not a part of SDK configured Cards, actually follow M2/M3
// switch, as well as on higher prio any ambient themed border radius
// the Card theme has, we need to do something like this, to get
// the correct border radius that we can use in the custom constructor
// further below.
//
// Default starting point value based on M3 and M2 mode spec values.
double borderRadius = useMaterial3 ? 12 : 4;
// Is themed? Try to get the radius from the theme and used that if it was.
final ShapeBorder? cardShape = theme.cardTheme.shape;
if (cardShape != null && cardShape is RoundedRectangleBorder) {
final BorderRadius shape = cardShape.borderRadius as BorderRadius;
borderRadius = shape.bottomLeft.x;
}

return ComponentDecoration(
label: 'Cards',
tooltipMessage: 'Use Card',
child: Wrap(
alignment: WrapAlignment.spaceEvenly,
children: <Widget>[
SizedBox(
width: cardWidth,
child: Card(
child: Container(
padding: const EdgeInsets.fromLTRB(10, 5, 5, 10),
child: Column(
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: IconButton(
icon: const Icon(Icons.more_vert),
onPressed: () {},
),
),
const SizedBox(height: 20),
const Align(
alignment: Alignment.bottomLeft,
child: Text('Elevated'),
)
],
),
),
),
),
SizedBox(
width: cardWidth,
child: Card(
color: theme.colorScheme.surfaceVariant,
elevation: 0,
child: Container(
padding: const EdgeInsets.fromLTRB(10, 5, 5, 10),
child: Column(
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: IconButton(
icon: const Icon(Icons.more_vert),
onPressed: () {},
),
),
const SizedBox(height: 20),
const Align(
alignment: Alignment.bottomLeft,
child: Text('Filled'),
)
],
),
),
),
),
SizedBox(
width: cardWidth,
child: Card(
elevation: 0,
shape: RoundedRectangleBorder(
side: BorderSide(
color: theme.colorScheme.outline,
),
borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
),
child: Container(
padding: const EdgeInsets.fromLTRB(10, 5, 5, 10),
child: Column(
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: IconButton(
icon: const Icon(Icons.more_vert),
onPressed: () {},
),
),
const SizedBox(height: 20),
const Align(
alignment: Alignment.bottomLeft,
child: Text('Outlined'),
)
],
),
),
),
),
],
),
);
return const CardTypesShowcase();
}
}

Expand Down
149 changes: 149 additions & 0 deletions example/lib/shared/widgets/universal/showcase_material.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4858,6 +4858,8 @@ class CardShowcase extends StatelessWidget {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const CardTypesShowcase(cardWidth: 130),
if (explain) const SizedBox(height: 16),
if (explain)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
Expand Down Expand Up @@ -5057,6 +5059,153 @@ class CardShowcase extends StatelessWidget {
}
}

class CardTypesShowcase extends StatelessWidget {
const CardTypesShowcase({
super.key,
this.cardWidth,
this.showThemedOutline = false,
});

final double? cardWidth;
final bool showThemedOutline;

static const double _cardWidth = 115;

@override
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
final bool useMaterial3 = theme.useMaterial3;

// (rydmike): To make the by Flutter team made custom outlined Card below
// that is a not a part of SDK configured Cards, actually follow M2/M3
// switch, as well as on higher prio any ambient themed border radius
// the Card theme has, we need to do something like this, to get
// the correct border radius that we can use in the custom constructor
// further below.
//
// Default starting point value based on M3 and M2 mode spec values.
double borderRadius = useMaterial3 ? 12 : 4;
// Is themed? Try to get the radius from the theme and used that if it was.
final ShapeBorder? cardShape = theme.cardTheme.shape;
if (cardShape != null && cardShape is RoundedRectangleBorder) {
final BorderRadius shape = cardShape.borderRadius as BorderRadius;
borderRadius = shape.bottomLeft.x;
}

return Wrap(
alignment: WrapAlignment.spaceEvenly,
children: <Widget>[
SizedBox(
width: cardWidth ?? _cardWidth,
child: Card(
child: Container(
padding: const EdgeInsets.fromLTRB(10, 5, 5, 10),
child: Column(
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: IconButton(
icon: const Icon(Icons.more_vert),
onPressed: () {},
),
),
const SizedBox(height: 20),
const Align(
alignment: Alignment.bottomLeft,
child: Text('Elevated'),
)
],
),
),
),
),
SizedBox(
width: cardWidth ?? _cardWidth,
child: Card.filled(
elevation: 0,
child: Container(
padding: const EdgeInsets.fromLTRB(10, 5, 5, 10),
child: Column(
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: IconButton(
icon: const Icon(Icons.more_vert),
onPressed: () {},
),
),
const SizedBox(height: 20),
const Align(
alignment: Alignment.bottomLeft,
child: Text('Filled'),
)
],
),
),
),
),
SizedBox(
width: cardWidth ?? _cardWidth,
child: Card.outlined(
elevation: 0,
shape: RoundedRectangleBorder(
side: BorderSide(color: theme.colorScheme.outlineVariant),
borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
),
borderOnForeground: false,
child: Container(
padding: const EdgeInsets.fromLTRB(10, 5, 5, 10),
child: Column(
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: IconButton(
icon: const Icon(Icons.more_vert),
onPressed: () {},
),
),
const SizedBox(height: 20),
const Align(
alignment: Alignment.bottomLeft,
child: Text('Outlined'),
)
],
),
),
),
),
if (showThemedOutline)
SizedBox(
width: cardWidth ?? _cardWidth,
child: Card.outlined(
elevation: 0,
borderOnForeground: false,
child: Container(
padding: const EdgeInsets.fromLTRB(10, 5, 5, 10),
child: Column(
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: IconButton(
icon: const Icon(Icons.more_vert),
onPressed: () {},
),
),
const SizedBox(height: 20),
const Align(
alignment: Alignment.bottomLeft,
child: Text('Outlined theme'),
)
],
),
),
),
),
],
);
}
}

class TextThemeShowcase extends StatelessWidget {
const TextThemeShowcase({super.key, this.showDetails = false});
final bool showDetails;
Expand Down
1 change: 1 addition & 0 deletions lib/src/flex_color_scheme.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6845,6 +6845,7 @@ class FlexColorScheme with Diagnosticable {
radius: subTheme.cardRadius ?? platformRadius,
elevation: subTheme.cardElevation,
surfaceTintColor: removeTint ? Colors.transparent : null,
useMaterial3: useMaterial3,
)
: null,
//
Expand Down

0 comments on commit 1145f40

Please sign in to comment.