Skip to content

Add Scantron example #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
shyndman wants to merge 10 commits into
base: main
Choose a base branch
from
Draft

Add Scantron example #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4bdd50a
Remove upper bound on Flutter constraint
Feb 10, 2021
4822ce5
Fix screenshot links
Feb 10, 2021
9d2a07a
Bump to v0.11.1
Feb 10, 2021
adfe507
Add hashCode to TrackSize subclasses
Feb 10, 2021
6bbff77
Bump version to v0.11.2
Feb 10, 2021
9861a0a
Update Scrabble image
Feb 10, 2021
ab79d12
Bump version to 0.11.3
Feb 10, 2021
d2bcfe9
Improve layout speed of periodic table
Feb 13, 2021
3c8ac02
Bump version to 0.11.4
Feb 13, 2021
2db7c2a
Add a Scantron example
Feb 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .vscode/launch.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@
"type": "dart",
"request": "launch",
},
{
"name": "Scantron",
"program": "example/scantron_answer_sheet.dart",
"type": "dart",
"request": "launch",
},
{
"name": "Basic",
"program": "example/basic.dart",
Expand Down
13 changes: 13 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
## [0.11.4]
* Improve performance of periodic table example

## [0.11.3]
* Update Scrabble screenshot to follow game rules (middle square must be
occupied)

## [0.11.2]
* Add hashCode to TrackSize subclasses

## [0.11.1]
* Fix screenshots for pub.dev

## [0.11.0]
* Tons of bug fixes in track sizing
* Documentation overhaul
Expand Down
10 changes: 5 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,21 @@ design.

<a href="/example/piet_painting_named_areas.dart">
<img
src="/doc/images/piet_trimmed.png"
src="https://raw.githubusercontent.com/shyndman/flutter_layout_grid/master/doc/images/piet_trimmed.png"
alt="Piet painting recreated using Flutter Layout Grid" height="220">
</a>
&nbsp;

<a href="/example/periodic_table.dart">
<img
src="/doc/images/periodic_table.png"
src="https://raw.githubusercontent.com/shyndman/flutter_layout_grid/master/doc/images/periodic_table.png"
alt="Periodic table rendered using Flutter Layout Grid" height="220">
</a>
&nbsp;

<a href="/example/scrabble.dart">
<img
src="/doc/images/scrabble.png"
src="https://raw.githubusercontent.com/shyndman/flutter_layout_grid/master/doc/images/scrabble.png"
alt="Scrabble board rendered using Flutter Layout Grid" height="330">
</a>

Expand Down Expand Up @@ -85,7 +85,7 @@ dependencies:

<a href="/example/app_layout.dart">
<img
src="/doc/images/app_layout.png"
src="https://raw.githubusercontent.com/shyndman/flutter_layout_grid/master/doc/images/app_layout.png"
alt="Desktop app layout rendered using Flutter Layout Grid" height="220">
</a>

Expand Down Expand Up @@ -164,7 +164,7 @@ There are currently three way to size rows and columns:
| Class Name | Description | Usage |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- |
| `FixedTrackSize` | Occupies a specific number of pixels on an axis | `FixedTrackSize(64)`<br>`fixed(64)`<br>`64.px` |
| `FlexibleSizeTrack` | Fills remaining space after the initial layout has completed | `FlexibleTrackSize(1.5)`<br>`flexible(1.5)`<br>`1.5.fr` |
| `FlexibleSizeTrack` | Fills remaining space after the initial layout has completed | `FlexibleTrackSize(1.5)`<br>`flex(1.5)`<br>`1.5.fr` |
| `IntrinsicContentTrackSize` | Sized to contain its itemsʼ contents. Will also expand to fill available space, once `FlexibleTrackSize` tracks have been given the opportunity. | `IntrinsicContentTrackSize()`<br>`intrinsic()`<br>`auto` |

Technically, you can also define your own, but probably shouldnʼt as the API
Expand Down
Binary file modified doc/images/scrabble.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 33 additions & 0 deletions example/example_helpers.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import 'dart:ui';

// Responsiveness

Size viewportSize = Size.zero;

extension ViewportUnits on num {
double get vw => viewportSize.width * (this / 100.0);
}

// Formatting

extension DoubleFormatting on double {
/// Formats a double with a maximum precision of [maxFractionDigits]. Any
/// trailing zeroes will be trimmed from the returned string.
String toStringAsMaxFixed([int maxFractionDigits = 2]) {
return this
.toStringAsFixed(maxFractionDigits)
.replaceAll(RegExp(r'\.?0+$'), '');
}
}

// Iterables

extension ListExt<T> on List<T> {
List<T> operator *(int times) => generate(times).expand((e) => this).toList();
}

Iterable<void> generate(int times) sync* {
for (int i = 0; i < times; i++) {
yield 0;
}
}
6 changes: 6 additions & 0 deletions example/macos/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,26 @@ PODS:
- FlutterMacOS (1.0.0)
- path_provider_macos (0.0.1):
- FlutterMacOS
- url_launcher_macos (0.0.1):
- FlutterMacOS

DEPENDENCIES:
- FlutterMacOS (from `Flutter/ephemeral`)
- path_provider_macos (from `Flutter/ephemeral/.symlinks/plugins/path_provider_macos/macos`)
- url_launcher_macos (from `Flutter/ephemeral/.symlinks/plugins/url_launcher_macos/macos`)

EXTERNAL SOURCES:
FlutterMacOS:
:path: Flutter/ephemeral
path_provider_macos:
:path: Flutter/ephemeral/.symlinks/plugins/path_provider_macos/macos
url_launcher_macos:
:path: Flutter/ephemeral/.symlinks/plugins/url_launcher_macos/macos

SPEC CHECKSUMS:
FlutterMacOS: 57701585bf7de1b3fc2bb61f6378d73bbdea8424
path_provider_macos: a0a3fd666cb7cd0448e936fb4abad4052961002b
url_launcher_macos: 45af3d61de06997666568a7149c1be98b41c95d4

PODFILE CHECKSUM: 6eac6b3292e5142cfc23bdeb71848a40ec51c14c

Expand Down
2 changes: 2 additions & 0 deletions example/macos/Runner.xcodeproj/project.pbxproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,10 +321,12 @@
inputPaths = (
"${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-frameworks.sh",
"${BUILT_PRODUCTS_DIR}/path_provider_macos/path_provider_macos.framework",
"${BUILT_PRODUCTS_DIR}/url_launcher_macos/url_launcher_macos.framework",
);
name = "[CP] Embed Pods Frameworks";
outputPaths = (
"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/path_provider_macos.framework",
"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/url_launcher_macos.framework",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
Expand Down
121 changes: 63 additions & 58 deletions example/periodic_table.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_layout_grid/flutter_layout_grid.dart';

import 'example_helpers.dart';

void main() {
runApp(PeriodicTableApp());
}
Expand All @@ -28,7 +30,7 @@ class PeriodicTableApp extends StatelessWidget {
debugShowCheckedModeBanner: false,
builder: (_, __) {
return LayoutBuilder(builder: (_, constraints) {
_viewportSize = constraints.biggest;
viewportSize = constraints.biggest;
return SingleChildScrollView(child: PeriodicTableWidget());
});
},
Expand All @@ -37,6 +39,7 @@ class PeriodicTableApp extends StatelessWidget {
}
}

/// Renders a periodic table.
class PeriodicTableWidget extends StatefulWidget {
@override
_PeriodicTableWidgetState createState() => _PeriodicTableWidgetState();
Expand Down Expand Up @@ -65,6 +68,10 @@ class _PeriodicTableWidgetState extends State<PeriodicTableWidget> {
}

Widget _buildGrid(PeriodicTable table) {
// !!! This is the grid behind the periodic table! !!!
//
// The rest of the code is just details (what goes where, how things should
// look, etc).
return LayoutGrid(
gridFit: GridFit.loose,
columnSizes: repeat(table.numColumns, [1.fr]),
Expand All @@ -73,15 +80,19 @@ class _PeriodicTableWidgetState extends State<PeriodicTableWidget> {
rowGap: 0.4.vw,
children: [
for (final e in table.elements)
AtomicElementWidget(
key: ValueKey(e.symbol),
element: e,
AspectRatio(
aspectRatio: 40.1 / 42.4,
child: AtomicElementWidget(
key: ValueKey(e.symbol),
element: e,
),
).withGridPlacement(columnStart: e.x, rowStart: e.y),
],
);
}
}

// Mappings between atomic categories and their associated colors.
const categoryColorMapping = {
AtomicElementCategory.actinide: Color(0xffc686cc),
AtomicElementCategory.alkaliMetal: Color(0xffecbe59),
Expand All @@ -95,6 +106,7 @@ const categoryColorMapping = {
AtomicElementCategory.unknown: Color(0xffcccccc),
};

/// A widget representing an element's square on the periodic table.
class AtomicElementWidget extends StatelessWidget {
AtomicElementWidget({Key key, this.element}) : super(key: key);
final AtomicElement element;
Expand All @@ -115,39 +127,54 @@ class AtomicElementWidget extends StatelessWidget {
color: elementColor,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
// Some viewport sizes give us slight overflows, which can be attributed
// to rounding errors. So we use a stack and allow overflow on the bottom
// edge.
child: Stack(
clipBehavior: Clip.hardEdge,
children: [
Padding(
padding: EdgeInsets.fromLTRB(0.3.vw, 0.15.vw, 0, 0),
child: Text(
element.number.toString(),
style: elementTextStyle.copyWith(fontSize: 0.5.vw),
textAlign: TextAlign.left,
),
Positioned.fill(
bottom: null,
child: _buildElementDetails(elementTextStyle),
),
Text(
element.symbol,
style: elementTextStyle.copyWith(fontSize: 1.9.vw),
textAlign: TextAlign.center,
softWrap: false,
],
),
);
}

Column _buildElementDetails(TextStyle elementTextStyle) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: EdgeInsets.fromLTRB(0.3.vw, 0.15.vw, 0, 0),
child: Text(
element.number.toString(),
style: elementTextStyle.copyWith(fontSize: 0.5.vw),
textAlign: TextAlign.left,
),
Text(
element.name,
style: elementTextStyle.copyWith(fontSize: 0.65.vw),
),
Text(
element.symbol,
style: elementTextStyle.copyWith(fontSize: 1.9.vw),
textAlign: TextAlign.center,
softWrap: false,
),
Text(
element.name,
style: elementTextStyle.copyWith(fontSize: 0.65.vw),
textAlign: TextAlign.center,
softWrap: false,
),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 0.2.vw, 0.0, 0.3.vw),
child: Text(
element.formattedMass,
style: elementTextStyle.copyWith(fontSize: 0.5.vw),
textAlign: TextAlign.center,
softWrap: false,
),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 0.2.vw, 0.0, 0.3.vw),
child: Text(
element.formattedMass,
style: elementTextStyle.copyWith(fontSize: 0.5.vw),
textAlign: TextAlign.center,
),
),
],
),
),
],
);
}
}
Expand All @@ -163,6 +190,7 @@ Future<PeriodicTable> loadPeriodicTable() async {
.toList());
}

/// The elements and structure of the periodic table.
class PeriodicTable {
PeriodicTable(this.elements) {
for (final e in elements) {
Expand All @@ -176,6 +204,8 @@ class PeriodicTable {
int numRows = 0;
}

/// Describes an atomic element, with a few view helpers and deserialization
/// logic.
class AtomicElement {
AtomicElement({
@required this.name,
Expand Down Expand Up @@ -219,6 +249,7 @@ class AtomicElement {
}
}

/// Categories of atomic element, as dictacted by...physics!
enum AtomicElementCategory {
actinide,
alkaliMetal,
Expand Down Expand Up @@ -259,29 +290,3 @@ AtomicElementCategory _parseAtomicElementCategory(String category) {
assert(category.startsWith('unknown'));
return AtomicElementCategory.unknown;
}

extension ListExt<T> on List<T> {
List<T> operator *(int times) => generate(times).expand((e) => this).toList();
}

Size _viewportSize = Size.zero;

extension on num {
double get vw => _viewportSize.width * (this / 100.0);
}

extension on double {
/// Formats a double with a maximum precision of [maxFractionDigits]. Any
/// trailing zeroes will be trimmed from the returned string.
String toStringAsMaxFixed([int maxFractionDigits = 2]) {
return this
.toStringAsFixed(maxFractionDigits)
.replaceAll(RegExp(r'\.?0+$'), '');
}
}

Iterable<void> generate(int times) sync* {
for (int i = 0; i < times; i++) {
yield 0;
}
}
2 changes: 2 additions & 0 deletions example/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ dependencies:
flutter_layout_grid:
path: ../
google_fonts: ^1.0.0
quiver: ^2.1.5
url_launcher: ^5.7.0

flutter:
assets:
Expand Down
Loading