mirror of
https://github.com/flutter/samples.git
synced 2025-11-09 06:18:49 +00:00
[Gallery] Convert the Makefile to instead use the Dart workflow package Grinder. (#191)
* Replace Makefile with the Dart workflows package Grinder
This commit is contained in:
@@ -2,29 +2,71 @@
|
|||||||
|
|
||||||
Flutter Gallery is a resource to help developers evaluate and use Flutter.
|
Flutter Gallery is a resource to help developers evaluate and use Flutter.
|
||||||
It is a collection of material design widgets, behaviors, and vignettes
|
It is a collection of material design widgets, behaviors, and vignettes
|
||||||
implemented with Flutter. We often get asked how one can see Flutter in
|
implemented with Flutter. We often get asked how one can see Flutter in action,
|
||||||
action, and this gallery demonstrates what Flutter provides and how it
|
and this gallery demonstrates what Flutter provides and how it behaves in the
|
||||||
behaves in the wild.
|
wild.
|
||||||
|
|
||||||
## Supported Platforms
|
## Supported Platforms
|
||||||
|
|
||||||
The Flutter Gallery application has been built to support multiple platforms. This includes:
|
The Flutter Gallery application has been built to support multiple platforms.
|
||||||
|
This includes:
|
||||||
|
|
||||||
* Android
|
- Android
|
||||||
* iOS
|
- iOS
|
||||||
* web
|
- web
|
||||||
* macOS
|
- macOS
|
||||||
* Linux
|
- Linux
|
||||||
* Windows
|
- Windows
|
||||||
|
|
||||||
That being said, extra steps must be taken to [enable Desktop support](https://github.com/flutter/flutter/wiki/Desktop-shells#tooling).
|
That being said, extra steps must be taken to [enable Desktop support](
|
||||||
|
https://github.com/flutter/flutter/wiki/Desktop-shells#tooling). For
|
||||||
|
example, to run the macOS app:
|
||||||
|
|
||||||
Additionally, the UI adapts between mobile and desktop layouts regardless of the platform it runs on. This is determined based on window size as outlined in [adaptive.dart](gallery/lib/layout/adaptive.dart).
|
```
|
||||||
|
cd gallery/
|
||||||
|
flutter config --enable-macos-desktop
|
||||||
|
flutter create --org io.flutter .
|
||||||
|
flutter run -d macos
|
||||||
|
```
|
||||||
|
|
||||||
|
Additionally, the UI adapts between mobile and desktop layouts regardless of the
|
||||||
|
platform it runs on. This is determined based on window size as outlined in
|
||||||
|
[adaptive.dart](gallery/lib/layout/adaptive.dart).
|
||||||
|
|
||||||
## To include a new splash animation
|
## To include a new splash animation
|
||||||
|
|
||||||
1. Convert your animation to a `.gif` file. Ideally, use a background color of `0xFF030303` to ensure the animation blends into the background of the app.
|
1. Convert your animation to a `.gif` file.
|
||||||
|
Ideally, use a background color of `0xFF030303` to ensure the animation
|
||||||
|
blends into the background of the app.
|
||||||
|
|
||||||
2. Add your new `.gif` file to the assets directory under `assets/splash_effects`. Ensure the name follows the format `splash_effect_$num.gif`. The number should be the next number after the current largest number in the repository.
|
2. Add your new `.gif` file to the assets directory under
|
||||||
|
`assets/splash_effects`. Ensure the name follows the format
|
||||||
|
`splash_effect_$num.gif`. The number should be the next number after the
|
||||||
|
current largest number in the repository.
|
||||||
|
|
||||||
3. Update the map `_effectDurations` in [splash.dart](gallery/lib/pages/splash.dart) to include the number of the new `.gif` as well as its estimated duration. The duration is used to determine how long to display the splash animation at launch.
|
3. Update the map `_effectDurations` in
|
||||||
|
[splash.dart](gallery/lib/pages/splash.dart) to include the number of the
|
||||||
|
new `.gif` as well as its estimated duration. The duration is used to
|
||||||
|
determine how long to display the splash animation at launch.
|
||||||
|
|
||||||
|
## Generating localized strings and highlighted code segments
|
||||||
|
|
||||||
|
To generate localized strings or highlighted code segments, make sure that you
|
||||||
|
have [grinder](https://pub.dev/packages/grinder) installed. You can install it
|
||||||
|
by getting the packages in `samples/gallery/gallery/`:
|
||||||
|
```
|
||||||
|
flutter pub get
|
||||||
|
```
|
||||||
|
|
||||||
|
To generate localized strings (see separate [README](gallery/lib/l10n/README.md)
|
||||||
|
for more details):
|
||||||
|
|
||||||
|
```
|
||||||
|
flutter pub run grinder l10n
|
||||||
|
```
|
||||||
|
|
||||||
|
To generate code segments (see separate [README](codeviewer_cli/README.md) for
|
||||||
|
more details):
|
||||||
|
```
|
||||||
|
flutter pub run grinder update-code-segments
|
||||||
|
```
|
||||||
|
|||||||
@@ -1,16 +1,34 @@
|
|||||||
|
# Codeviewer
|
||||||
|
|
||||||
A command-line application to highlight dart source code.
|
A command-line application to highlight dart source code.
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
|
|
||||||
Code segments are highlighted before the app is compiled.
|
Code segments are highlighted before the app is compiled.
|
||||||
This is done because the highlighting process can take 300ms to finish, creating a noticeable delay when the demo switches to code page.
|
This is done because the highlighting process can take 300ms to finish, creating
|
||||||
|
a noticeable delay when the demo switches to code page.
|
||||||
|
|
||||||
The highlighter takes all files in the `gallery/lib/demos/` folder and scans each.
|
The highlighter takes all files in the `gallery/lib/demos/` folder and scans each.
|
||||||
Highlighted code widgets are stored in the `gallery/lib/codeviewer/code_segments.dart` file.
|
Highlighted code widgets are stored in the
|
||||||
Under the root directory, run `make update-code-segments` to run the highlighter.
|
`gallery/lib/codeviewer/code_segments.dart` file.
|
||||||
|
|
||||||
Wrap a block of code with lines `// BEGIN yourDemoName` and `// END` to mark it for highlighting. The block in between, as well as any copyright notice and imports at the beginning of the file, are automatically taken and highlighted, and stored as `static TextSpan yourDemoName(BuildContext context)` in `gallery/lib/codeviewer/code_segments.dart`.
|
## How to generate code segments
|
||||||
To display the code, go to `gallery/lib/data/demos.dart`, and add `code: CodeSegments.yourDemoName,` to your `GalleryDemoConfiguration` object.
|
|
||||||
|
From the `samples/gallery/gallery/` directory:
|
||||||
|
1. Make sure you have [grinder](https://pub.dev/packages/grinder) installed by
|
||||||
|
running `flutter pub get`.
|
||||||
|
2. Then run `flutter pub run grinder update-code-segments` to generate code
|
||||||
|
segments with highlighting.
|
||||||
|
|
||||||
|
## How to define a block of code to generate highlighting for
|
||||||
|
|
||||||
|
Wrap a block of code with lines `// BEGIN yourDemoName` and `// END` to mark it
|
||||||
|
for highlighting. The block in between, as well as any copyright notice and
|
||||||
|
imports at the beginning of the file, are automatically taken and highlighted,
|
||||||
|
and stored as `static TextSpan yourDemoName(BuildContext context)` in
|
||||||
|
`gallery/lib/codeviewer/code_segments.dart`. To display the code, go to
|
||||||
|
`gallery/lib/data/demos.dart`, and add `code: CodeSegments.yourDemoName,` to
|
||||||
|
your `GalleryDemoConfiguration` object.
|
||||||
|
|
||||||
## Multiple blocks of code
|
## Multiple blocks of code
|
||||||
|
|
||||||
|
|||||||
@@ -1,35 +0,0 @@
|
|||||||
ROOT := $(shell git rev-parse --show-toplevel)/gallery
|
|
||||||
FLUTTER := $(shell which flutter)
|
|
||||||
FLUTTER_BIN_DIR := $(shell dirname $(FLUTTER))
|
|
||||||
FLUTTER_DIR := $(FLUTTER_BIN_DIR:/bin=)
|
|
||||||
DART := $(FLUTTER_BIN_DIR)/cache/dart-sdk/bin/dart
|
|
||||||
|
|
||||||
.PHONY: analyze
|
|
||||||
analyze:
|
|
||||||
$(FLUTTER) analyze
|
|
||||||
|
|
||||||
.PHONY: format
|
|
||||||
format:
|
|
||||||
$(FLUTTER) format .
|
|
||||||
|
|
||||||
.PHONY: test
|
|
||||||
test:
|
|
||||||
$(FLUTTER) test
|
|
||||||
|
|
||||||
.PHONY: gen-l10n
|
|
||||||
gen-l10n:
|
|
||||||
$(DART) $(FLUTTER_DIR)/dev/tools/localization/bin/gen_l10n.dart \
|
|
||||||
--template-arb-file=intl_en_US.arb \
|
|
||||||
--output-localization-file=gallery_localizations.dart \
|
|
||||||
--output-class=GalleryLocalizations
|
|
||||||
|
|
||||||
.PHONY: l10n
|
|
||||||
l10n: gen-l10n format
|
|
||||||
cd $(ROOT)/l10n_cli/ && $(FLUTTER) pub get
|
|
||||||
$(DART) $(ROOT)/l10n_cli/bin/main.dart
|
|
||||||
|
|
||||||
.PHONY: update-code-segments
|
|
||||||
update-code-segments:
|
|
||||||
cd $(ROOT)/codeviewer_cli/ && $(FLUTTER) pub get
|
|
||||||
$(DART) $(ROOT)/codeviewer_cli/bin/main.dart
|
|
||||||
$(FLUTTER) format $(ROOT)/gallery/lib/codeviewer/code_segments.dart
|
|
||||||
@@ -22,18 +22,21 @@ This allows use of the English message through your localizations delegate in
|
|||||||
the application code immediately without having to wait for the translations
|
the application code immediately without having to wait for the translations
|
||||||
to be completed.
|
to be completed.
|
||||||
|
|
||||||
To generate `GalleryLocalizations`, from `gallery/` run:
|
## How to Generate GalleryLocalizations with Grinder
|
||||||
```
|
|
||||||
make l10n
|
|
||||||
```
|
|
||||||
|
|
||||||
For more details on what `make l10n` runs, you can read below under Generate GalleryLocalizations.
|
From the `samples/gallery/gallery/` directory:
|
||||||
|
1. Make sure you have [grinder](https://pub.dev/packages/grinder) installed by
|
||||||
|
running `flutter pub get`.
|
||||||
|
2. Then run `flutter pub run grinder l10n` to generate `GalleryLocalizations`.
|
||||||
|
|
||||||
The current supported locales list is sorted alphabetically. So after running the script, update
|
For more details on what `flutter pub run grinder l10n` runs, you can read below
|
||||||
`gallery_localizations.dart` to move the `en_US` locale to the top of the list.
|
under *How to Generate GalleryLocalizations with l10n scripts*. The current
|
||||||
|
supported locales list is sorted alphabetically. This means that after running
|
||||||
|
the script, you have to update `gallery_localizations.dart` and move the `en_US`
|
||||||
|
locale to the top of the list.
|
||||||
|
|
||||||
## Generate GalleryLocalizations
|
## How to Generate GalleryLocalizations with l10n scripts
|
||||||
To generate GalleryLocalizations, from `gallery/` run:
|
To generate GalleryLocalizations, from `samples/gallery/gallery/` run:
|
||||||
|
|
||||||
```dart
|
```dart
|
||||||
dart ${YOUR_FLUTTER_PATH}/dev/tools/localization/bin/gen_l10n.dart \
|
dart ${YOUR_FLUTTER_PATH}/dev/tools/localization/bin/gen_l10n.dart \
|
||||||
@@ -42,9 +45,9 @@ dart ${YOUR_FLUTTER_PATH}/dev/tools/localization/bin/gen_l10n.dart \
|
|||||||
--output-class=GalleryLocalizations
|
--output-class=GalleryLocalizations
|
||||||
```
|
```
|
||||||
|
|
||||||
From `gallery/`, run `dart ../l10n_cli/bin/main.dart`, which will generate
|
From `samples/gallery/gallery/`, run `dart ../l10n_cli/bin/main.dart`, which
|
||||||
`intl_en_US.xml`. This will be used by the internal translation console to
|
will generate `intl_en_US.xml`. This will be used by the internal translation
|
||||||
generate messages in the different locales.
|
console to generate messages in the different locales.
|
||||||
|
|
||||||
Run the formatter to make the Flutter analyzer happy:
|
Run the formatter to make the Flutter analyzer happy:
|
||||||
```
|
```
|
||||||
@@ -63,8 +66,7 @@ available, run the following commands to generate all necessary
|
|||||||
`messages_<locale>.dart` files and the `localizations_delegate.dart` file:
|
`messages_<locale>.dart` files and the `localizations_delegate.dart` file:
|
||||||
|
|
||||||
```
|
```
|
||||||
make gen-l10n
|
flutter pub run grinder l10n
|
||||||
make format
|
|
||||||
```
|
```
|
||||||
|
|
||||||
which is equal to
|
which is equal to
|
||||||
@@ -79,9 +81,3 @@ flutter format .
|
|||||||
```
|
```
|
||||||
|
|
||||||
This ensures the generated `.dart` files updated with the latest translations.
|
This ensures the generated `.dart` files updated with the latest translations.
|
||||||
|
|
||||||
Run the formatter to make the Flutter analyzer happy:
|
|
||||||
```
|
|
||||||
flutter format .
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|||||||
@@ -43,6 +43,13 @@ packages:
|
|||||||
url: "https://pub.dartlang.org"
|
url: "https://pub.dartlang.org"
|
||||||
source: hosted
|
source: hosted
|
||||||
version: "1.1.2"
|
version: "1.1.2"
|
||||||
|
cli_util:
|
||||||
|
dependency: transitive
|
||||||
|
description:
|
||||||
|
name: cli_util
|
||||||
|
url: "https://pub.dartlang.org"
|
||||||
|
source: hosted
|
||||||
|
version: "0.1.3+2"
|
||||||
collection:
|
collection:
|
||||||
dependency: "direct main"
|
dependency: "direct main"
|
||||||
description:
|
description:
|
||||||
@@ -149,6 +156,13 @@ packages:
|
|||||||
url: "https://pub.dartlang.org"
|
url: "https://pub.dartlang.org"
|
||||||
source: hosted
|
source: hosted
|
||||||
version: "1.2.0"
|
version: "1.2.0"
|
||||||
|
grinder:
|
||||||
|
dependency: "direct dev"
|
||||||
|
description:
|
||||||
|
name: grinder
|
||||||
|
url: "https://pub.dartlang.org"
|
||||||
|
source: hosted
|
||||||
|
version: "0.8.3+1"
|
||||||
html:
|
html:
|
||||||
dependency: transitive
|
dependency: transitive
|
||||||
description:
|
description:
|
||||||
|
|||||||
@@ -37,6 +37,7 @@ dependencies:
|
|||||||
dev_dependencies:
|
dev_dependencies:
|
||||||
flutter_test:
|
flutter_test:
|
||||||
sdk: flutter
|
sdk: flutter
|
||||||
|
grinder: ^0.8.0
|
||||||
|
|
||||||
flutter:
|
flutter:
|
||||||
assets:
|
assets:
|
||||||
|
|||||||
77
gallery/gallery/tool/grind.dart
Normal file
77
gallery/gallery/tool/grind.dart
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
// Copyright 2019 The Flutter team. All rights reserved.
|
||||||
|
// Use of this source code is governed by a BSD-style license that can be
|
||||||
|
// found in the LICENSE file.
|
||||||
|
|
||||||
|
import 'dart:io';
|
||||||
|
|
||||||
|
import 'package:grinder/grinder.dart';
|
||||||
|
import 'package:path/path.dart' as path;
|
||||||
|
|
||||||
|
void main(List<String> args) => grind(args);
|
||||||
|
|
||||||
|
@Task('Get packages')
|
||||||
|
Future<void> pubGet({String directory}) async {
|
||||||
|
await _runProcess(
|
||||||
|
'flutter',
|
||||||
|
['pub', 'get', if (directory != null) directory],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Task('Format dart files')
|
||||||
|
Future<void> format({String path = '.'}) async {
|
||||||
|
await _runProcess('flutter', ['format', path]);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Task('Generate localizations files')
|
||||||
|
Future<void> generateLocalizations() async {
|
||||||
|
final l10nScriptFile = path.join(
|
||||||
|
_flutterRootPath(),
|
||||||
|
'dev',
|
||||||
|
'tools',
|
||||||
|
'localization',
|
||||||
|
'bin',
|
||||||
|
'gen_l10n.dart',
|
||||||
|
);
|
||||||
|
|
||||||
|
Dart.run(l10nScriptFile, arguments: [
|
||||||
|
'--template-arb-file=intl_en_US.arb',
|
||||||
|
'--output-localization-file=gallery_localizations.dart',
|
||||||
|
'--output-class=GalleryLocalizations',
|
||||||
|
]);
|
||||||
|
await format(path: path.join('lib', 'l10n'));
|
||||||
|
}
|
||||||
|
|
||||||
|
@Task('Transform arb to xml for English')
|
||||||
|
@Depends(generateLocalizations)
|
||||||
|
Future<void> l10n() async {
|
||||||
|
final l10nPath = path.join(Directory.current.parent.path, 'l10n_cli');
|
||||||
|
await pubGet(directory: l10nPath);
|
||||||
|
|
||||||
|
Dart.run(path.join(l10nPath, 'bin', 'main.dart'));
|
||||||
|
}
|
||||||
|
|
||||||
|
@Task('Update code segments')
|
||||||
|
Future<void> updateCodeSegments() async {
|
||||||
|
final codeviewerPath =
|
||||||
|
path.join(Directory.current.parent.path, 'codeviewer_cli');
|
||||||
|
await pubGet(directory: codeviewerPath);
|
||||||
|
|
||||||
|
Dart.run(path.join(codeviewerPath, 'bin', 'main.dart'));
|
||||||
|
final targetFilePath = path.join('lib', 'codeviewer', 'code_segments.dart');
|
||||||
|
await format(path: targetFilePath);
|
||||||
|
}
|
||||||
|
|
||||||
|
Future<void> _runProcess(String executable, List<String> arguments) async {
|
||||||
|
final result = await Process.run(executable, arguments);
|
||||||
|
stdout.write(result.stdout);
|
||||||
|
stderr.write(result.stderr);
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Return the flutter root path from the environment variables.
|
||||||
|
String _flutterRootPath() {
|
||||||
|
final flutterBinPath =
|
||||||
|
Platform.environment['PATH'].split(':').lastWhere((setting) {
|
||||||
|
return path.canonicalize(setting).endsWith(path.join('flutter', 'bin'));
|
||||||
|
});
|
||||||
|
return Directory(flutterBinPath).parent.path;
|
||||||
|
}
|
||||||
@@ -1,4 +1,7 @@
|
|||||||
A command-line application that converts .arb files to .xml files for translation consumption.
|
# l10n
|
||||||
|
|
||||||
|
A command-line application that converts .arb files to .xml files for
|
||||||
|
translation consumption.
|
||||||
|
|
||||||
Created from templates made available by Stagehand under a BSD-style
|
Created from templates made available by Stagehand under a BSD-style
|
||||||
[license](https://github.com/dart-lang/stagehand/blob/master/LICENSE).
|
[license](https://github.com/dart-lang/stagehand/blob/master/LICENSE).
|
||||||
|
|||||||
Reference in New Issue
Block a user