Commit Graph

11 Commits

Author SHA1 Message Date
Taha Tesser
fa85f69e47
Add missing overlayColor property in styleFrom methods (#146685)
fixes [Add missing `overlayColor` property  in `styleFrom` methods](https://github.com/flutter/flutter/issues/146636)

### Code sample

<details>
<summary>expand to view the code sample</summary> 

```dart
import 'package:flutter/material.dart';

enum Sizes { extraSmall, small, medium, large, extraLarge }

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Text('styleFrom(overlayColor: Colors.red)', style: Theme.of(context).textTheme.titleLarge),
              TextButton(
                style: TextButton.styleFrom(overlayColor: Colors.red),
                onPressed: () {},
                child: const Text('TextButton'),
              ),
              IconButton(
                style: IconButton.styleFrom(
                  overlayColor: Colors.red,
                ),
                onPressed: () {},
                icon: const Icon(Icons.add),
              ),
              MenuBar(
                children: [
                  MenuItemButton(
                    style: MenuItemButton.styleFrom(overlayColor: Colors.red),
                    child: const Text('MenuItemButton'),
                    onPressed: () {},
                  ),
                  SubmenuButton(
                    style: SubmenuButton.styleFrom(overlayColor: Colors.red),
                    menuChildren: [
                      MenuItemButton(
                        child: const Text('MenuItemButton'),
                        onPressed: () {},
                      ),
                    ],
                    child: const Text('SubmenuButton'),
                  ),
                ],
              ),
              SegmentedButton<Sizes>(
                style:
                    SegmentedButton.styleFrom(overlayColor: Colors.red),
                segments: const <ButtonSegment<Sizes>>[
                  ButtonSegment<Sizes>(
                      value: Sizes.extraSmall, label: Text('XS')),
                  ButtonSegment<Sizes>(value: Sizes.small, label: Text('S')),
                  ButtonSegment<Sizes>(value: Sizes.medium, label: Text('M')),
                  ButtonSegment<Sizes>(
                    value: Sizes.large,
                    label: Text('L'),
                  ),
                  ButtonSegment<Sizes>(
                      value: Sizes.extraLarge, label: Text('XL')),
                ],
                selected: const {Sizes.medium},
                onSelectionChanged: (Set<Sizes> newSelection) {},
                multiSelectionEnabled: true,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
```

</details>

### Preview

![ScreenRecording2024-04-12at15 25 58-ezgif com-video-to-gif-converter](https://github.com/flutter/flutter/assets/48603081/89b9638d-f369-4ef1-b501-17c9c74b2541)
2024-04-24 11:56:32 +00:00
Qun Cheng
0d8eafb006
Reland "Reland - Introduce tone-based surfaces and accent color add-ons - Part 2" (#144273) 2024-02-28 13:55:50 -08:00
auto-submit[bot]
2eee0b5750
Reverts "Reland - Introduce tone-based surfaces and accent color add-ons - Part 2 (#144001)" (#144262)
Reverts flutter/flutter#144001

Initiated by: Piinks

Reason for reverting: Failing goldens at the tip of tree

Original PR Author: QuncCccccc

Reviewed By: {HansMuller}

This change reverts the following previous change:
Original Description:
Reverts flutter/flutter#143973

This is a reland for #138521 with an updated g3fix(cl/605555997). Local test: cl/609608958.
2024-02-27 22:04:18 +00:00
Qun Cheng
871d59221c
Reland - Introduce tone-based surfaces and accent color add-ons - Part 2 (#144001)
Reverts flutter/flutter#143973

This is a reland for #138521 with an updated g3fix(cl/605555997). Local test: cl/609608958.
2024-02-27 20:21:14 +00:00
Qun Cheng
4715216c01
Revert "Introduce tone-based surfaces and accent color add-ons - Part 2" (#143973)
Reverts flutter/flutter#138521
2024-02-22 14:51:28 -08:00
Qun Cheng
a2c7ed95d1
Introduce tone-based surfaces and accent color add-ons - Part 2 (#138521)
This PR is to introduce 19 new color roles and deprecate 3 color roles in `ColorScheme`.
**Tone-based surface colors** (7 colors): 
* surfaceBright
* surfaceDim
* surfaceContainer
* surfaceContainerLowest
* surfaceContainerLow
* surfaceContainerHigh
* surfaceContainerHighest

**Accent color add-ons** (12 colors):
* primary/secondary/tertiary-Fixed
* primary/secondary/tertiary-FixedDim
* onPrimary/onSecondary/onTertiary-Fixed
* onPrimary/onSecondary/onTertiary-FixedVariant

**Deprecated colors**:
* background -> replaced with surface
* onBackground -> replaced with onSurface
* surfaceVariant -> replaced with surfaceContainerHighest

Please checkout this [design doc](https://docs.google.com/document/d/1ODqivpM_6c490T4j5XIiWCDKo5YqHy78YEFqDm4S8h4/edit?usp=sharing) for more information:)

![Screenshot 2024-01-08 at 4 56 51 PM](https://github.com/flutter/flutter/assets/36861262/353cdb4c-6ba9-4435-a518-fd3f67e415f0)
2024-02-20 19:01:50 +00:00
Furkan Acar
83ac76050d
Add SegmentedButton.styleFrom (#137542)
fixes https://github.com/flutter/flutter/issues/138289

---

SegmentedButtom.styleFrom has been added to the segment button, so there is no longer any need to the button style from the beginning. It works like ElevatedButton.styleFrom only I added selectedForegroundColor, selectedBackgroundColor. In this way, the user will be able to change the color first without checking the MaterialState states. I added tests of the same controls.

#129215 I opened this problem myself, but I was rejected because I handled too many items in a PR. For now, I wrote a structure that only handles MaterialStates instead of users.

old (still avaliable)
<img width="626" alt="image" src="https://github.com/flutter/flutter/assets/65075121/9446b13b-c355-4d20-bda2-c47a23d42d4f">

new (just an option for developer)
<img width="483" alt="image" src="https://github.com/flutter/flutter/assets/65075121/0a645257-4c83-4029-9484-bd746c02265f">

### Code sample

<details>
<summary>expand to view the code sample</summary> 

```dart
import 'package:flutter/material.dart';

/// Flutter code sample for [SegmentedButton].

void main() {
  runApp(const SegmentedButtonApp());
}

enum Calendar { day, week, month, year }

class SegmentedButtonApp extends StatefulWidget {
  const SegmentedButtonApp({super.key});

  @override
  State<SegmentedButtonApp> createState() => _SegmentedButtonAppState();
}

class _SegmentedButtonAppState extends State<SegmentedButtonApp> {
  Calendar calendarView = Calendar.day;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: Scaffold(
        body: Center(
          child: SegmentedButton<Calendar>(
            style: SegmentedButton.styleFrom(
              foregroundColor: Colors.amber,
              visualDensity: VisualDensity.comfortable,
            ),
            // style: const ButtonStyle(
            //   foregroundColor: MaterialStatePropertyAll<Color>(Colors.deepPurple),
            //   visualDensity: VisualDensity.comfortable,
            // ),
            segments: const <ButtonSegment<Calendar>>[
              ButtonSegment<Calendar>(
                  value: Calendar.day,
                  label: Text('Day'),
                  icon: Icon(Icons.calendar_view_day)),
              ButtonSegment<Calendar>(
                  value: Calendar.week,
                  label: Text('Week'),
                  icon: Icon(Icons.calendar_view_week)),
              ButtonSegment<Calendar>(
                  value: Calendar.month,
                  label: Text('Month'),
                  icon: Icon(Icons.calendar_view_month)),
              ButtonSegment<Calendar>(
                  value: Calendar.year,
                  label: Text('Year'),
                  icon: Icon(Icons.calendar_today)),
            ],
            selected: <Calendar>{calendarView},
            onSelectionChanged: (Set<Calendar> newSelection) {
              setState(() {
                calendarView = newSelection.first;
              });
            },
          ),
        ),
      ),
    );
  }
}

```

</details>
2024-01-03 21:26:02 +00:00
Pierre-Louis
66cda5917d
Improve defaults generation with logging, stats, and token validation (#128244)
## Description

This improves defaults generation with logging, stats, and token validation. 

This PR includes these changes:
* introduce `TokenLogger`, with a verbose mode
  * prints versions and tokens usage to the console
  * outputs `generated/used_tokens.csv`, a list of all used tokens, for use by Google
* find token files in `data` automatically
* hide tokens `Map`
  * tokens can be obtained using existing resolvers (e.g. `color`, `shape`), or directly through `getToken`.
  * tokens can be checked for existence with `tokenAvailable`
* remove version from template, since the tokens are aggregated and multiple versions are possible (as is the case currently), it does not make sense to attribute a single version
* improve documentation

## Related Issues
 - Fixes https://github.com/flutter/flutter/issues/122602

## Tests
 - Added tests for `TokenLogger`
 - Regenerated tokens, no-op except version removal

## Future work
A future PR should replace or remove the following invalid tokens usages

<img width="578" alt="image" src="https://github.com/flutter/flutter/assets/6655696/b6f9e5a7-523f-4f72-94f9-1b0bf4cc9f00">
2023-06-09 11:28:18 +00:00
Qun Cheng
4e7e4512b6
Reorder materialStateProperty defaults (#125905)
Fixes #122250. This PR is to make sure all the MaterialStateProperty defaults are able to correctly resolve different states. 
* When a widget is pressed, it is also hovered, so we need to put the `MaterialState.pressed` check before `MaterialState.hovered`. 
* When a widget is focused, the widget should still be able to be hovered, so we should check `MaterialState.hovered` before `MaterialState.focused`.
* There are also cases like in _InputDecoratorDefaultsM3, the `MaterialState.disabled` should be checked before `MaterialState.error`.

 the order should be disabled, (error), pressed, hovered, focused.
2023-05-11 00:03:09 +00:00
Eilidh Southren
7a6f1d81d6
M3 segmented buttons token fixes (#120095)
* add icon button property override

* Revert "add icon button property override"

This reverts commit 6c7f4d3067.

* segmented button updates

* button changes

* fix

* put that thing back where it came from

* template updates

* analyzer fixes

* rename parameter

* analyzer fixes

* string interpolation fix

* template updates

* test updates
2023-02-07 10:53:36 +00:00
Darren Austin
6ec2bd0a80
M3 Segmented Button widget (#113723) 2022-11-11 22:13:57 -08:00