flutter_flutter

mirror of https://github.com/flutter/flutter.git synced 2026-02-03 17:51:05 +08:00

History

Update Material 3 LinearProgressIndicator for new visual style (#154817 )

Related to [Update both `ProgressIndicator` for Material 3 redesign](https://github.com/flutter/flutter/issues/141340)

### Code sample

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

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isRTL = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(

        body: Directionality(
          textDirection: isRTL ? TextDirection.rtl : TextDirection.ltr,
          child: Center(
            child: Column(
              spacing: 2.0,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text('Default LinearProgressIndicator'),
                const Padding(
                  padding: EdgeInsets.all(16.0),
                  child: LinearProgressIndicator(
                    value: 0.45,
                  ),
                ),
                const Text('Default indefinite LinearProgressIndicator'),
                const Padding(
                  padding: EdgeInsets.all(16.0),
                  child: LinearProgressIndicator(),
                ),
                const Text('Updated height and border radius'),
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: LinearProgressIndicator(
                    value: 0.25,
                    minHeight: 16.0,
                    borderRadius: BorderRadius.circular(16.0),
                  ),
                ),
                const Text('Updated stop indicator color and radius'),
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: LinearProgressIndicator(
                    value: 0.74,
                    minHeight: 16.0,
                    borderRadius: BorderRadius.circular(16.0),
                    stopIndicatorColor: Theme.of(context).colorScheme.error,
                    stopIndicatorRadius: 32.0,
                  ),
                ),
                const Text('Track gap and stop indicator radius set to 0'),
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: LinearProgressIndicator(
                    value: 0.50,
                    minHeight: 16.0,
                    borderRadius: BorderRadius.circular(16.0),
                    trackGap: 0,
                    stopIndicatorRadius: 0,
                  ),
                ),
              ],
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton.extended(
          onPressed: () {
            setState(() {
              isRTL = !isRTL;
            });
          },
          label:  const Text('Toggle Direction'),
        ),
      ),
    );
  }
}
```

</details>

### Preview

<img width="824" alt="Screenshot 2024-09-09 at 13 53 10" src="https://github.com/user-attachments/assets/d12e56a5-f196-4011-8266-c7ab96be96b2">

2024-10-30 18:14:11 +00:00

bin

Update tokens to 4.0.0 (#148789 )

2024-05-22 15:08:25 +00:00

data

Update tokens to v6.1 (#153722 )

2024-09-04 00:20:16 +00:00

generated

Update Material 3 LinearProgressIndicator for new visual style (#154817 )

2024-10-30 18:14:11 +00:00

lib

Update Material 3 LinearProgressIndicator for new visual style (#154817 )

2024-10-30 18:14:11 +00:00

test

…

dart_test.yaml

…

pubspec.yaml

Roll pub packages (#156925 )

2024-10-18 20:17:18 +00:00

README.md

…

test.json

…

README.md

Token Defaults Generator

Script that generates component theme data defaults based on token data.

Usage

Run this program from the root of the git repository:

dart dev/tools/gen_defaults/bin/gen_defaults.dart [-v]

This updates generated/used_tokens.csv and the various component theme files.

Templates

There is a template file for every component that needs defaults from the token database. These templates are implemented as subclasses of TokenTemplate. This base class provides some utilities and a structure for adding a new block of generated code to the bottom of a given file.

Templates need to override the generate method to provide the generated code block as a string.

See lib/fab_template.dart for an example that generates defaults for the Floating Action Button.

Tokens

Tokens are stored in JSON files in data/, and are sourced from an internal Google database.

template.dart should provide nearly all useful token resolvers (e.g. color, shape, etc.). For special cases in which one shouldn't be defined, use getToken to get the raw token value. The script, through the various revolvers and getToken, validates tokens, keeps track of which tokens are used, and generates generated/used_tokens.csv.