Skip to content

Commit

Permalink
No ticket/code examples (#5)
Browse files Browse the repository at this point in the history 
 adding code example
  • Loading branch information
@thelukewalton
thelukewalton authored and github-actions committed Feb 16, 2023
1 parent 0340212 commit b0ad7f1
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 49 deletions.
2 changes: 1 addition & 1 deletion example/lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ class MyApp extends StatefulWidget {
}

final List components = [
const GridExample(),
GridExample(),
];

class _MyAppState extends State<MyApp> {
Expand Down
156 changes: 110 additions & 46 deletions example/lib/pages/grid_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,60 +3,124 @@ import 'package:zeta_flutter/zeta_flutter.dart';

import '../example_scaffold.dart';

class _GridExampleModel {
final int col;
final bool noGaps;
final int? asymmetric;
final String name;
final List<Widget>? children;
final String? childrenText;

const _GridExampleModel(
this.col,
this.asymmetric,
this.noGaps,
this.name, [
this.children,
this.childrenText,
]);
}

class GridExample extends StatelessWidget implements ExampleWidget {
const GridExample({super.key});
final List<_GridExampleModel> _gridExamples = [
const _GridExampleModel(12, null, false, 'Basic 12 col grid'),
const _GridExampleModel(12, null, true, 'Basic 12 col grid'),
const _GridExampleModel(2, null, false, '2 col grid'),
const _GridExampleModel(4, null, false, '4 col grid'),
const _GridExampleModel(8, null, false, '8 col grid'),
const _GridExampleModel(12, null, false, '12 col grid'),
const _GridExampleModel(16, null, false, '16 col grid'),
const _GridExampleModel(2, null, true, '2 col grid gapless'),
const _GridExampleModel(4, null, true, '4 col grid gapless'),
const _GridExampleModel(8, null, true, '8 col grid gapless'),
const _GridExampleModel(12, null, true, '12 col grid gapless'),
const _GridExampleModel(16, null, true, '16 col grid gapless'),
const _GridExampleModel(12, 11, false, '11 to 1 grid'),
const _GridExampleModel(12, 10, false, '10 to 2 grid'),
const _GridExampleModel(12, 9, false, '9 to 3 grid'),
const _GridExampleModel(12, 8, false, '8 to 4 grid'),
const _GridExampleModel(12, 7, false, '7 to 5 grid'),
const _GridExampleModel(12, 5, false, '5 to 7 grid'),
const _GridExampleModel(12, 4, false, '4 to 8 grid'),
const _GridExampleModel(12, 3, false, '3 to 9 grid'),
const _GridExampleModel(12, 2, false, '2 to 10 grid'),
const _GridExampleModel(12, 1, false, '1 to 11 grid'),
const _GridExampleModel(12, 11, true, '11 to 1 grid gapless '),
const _GridExampleModel(12, 10, true, '10 to 2 grid gapless '),
const _GridExampleModel(12, 9, true, '9 to 3 grid gapless '),
const _GridExampleModel(12, 8, true, '8 to 4 grid gapless '),
const _GridExampleModel(12, 7, true, '7 to 5 grid gapless '),
const _GridExampleModel(12, 5, true, '5 to 7 grid gapless '),
const _GridExampleModel(12, 4, true, '4 to 8 grid gapless '),
const _GridExampleModel(12, 3, true, '3 to 9 grid gapless '),
const _GridExampleModel(12, 2, true, '2 to 10 grid gapless '),
const _GridExampleModel(12, 1, true, '1 to 11 grid gapless '),
const _GridExampleModel(12, 1, true, '1 to 11 grid gapless '),
const _GridExampleModel(
8,
null,
false,
'Hybrid',
[
GridItem(width: 120),
Flexible(child: GridItem()),
GridItem(width: 80),
Flexible(flex: 2, child: GridItem()),
GridItem(width: 76),
Flexible(child: GridItem()),
Flexible(flex: 3, child: GridItem()),
GridItem(width: 40),
],
"[GridItem(width: 120), Flexible(child: GridItem()),GridItem(width: 80), Flexible(flex: 2, child: GridItem()), GridItem(width: 76), Flexible(child: GridItem()), Flexible(flex: 3, child: GridItem()), GridItem(width: 40), ]",
),
const _GridExampleModel(
8,
null,
false,
'Hybrid',
[
GridItem(width: 120),
Flexible(child: GridItem()),
GridItem(width: 80),
Flexible(flex: 2, child: GridItem()),
GridItem(width: 76),
Flexible(child: GridItem()),
Flexible(flex: 3, child: GridItem()),
GridItem(width: 40),
],
"[GridItem(width: 120), Flexible(child: GridItem()),GridItem(width: 80), Flexible(flex: 2, child: GridItem()), GridItem(width: 76), Flexible(child: GridItem()), Flexible(flex: 3, child: GridItem()), GridItem(width: 40), ]",
),
];
GridExample({super.key});

@override
Widget build(BuildContext context) {
final List<Widget> gridItems = List.generate(16, (index) => GridItem(label: index + 1));

return ExampleScaffold(
name: name,
children: [
const Text("Basic (12 column) grid"),
ZetaGrid(children: gridItems),
const Text("`noGaps: true` removes the gaps from any grid"),
ZetaGrid(noGaps: true, children: gridItems),
const Text("2 column grid symmetrical."),
ZetaGrid(col: 2, children: gridItems),
const Text("4 column grid symmetrical."),
ZetaGrid(col: 4, children: gridItems),
const Text("8 column grid symmetrical."),
ZetaGrid(col: 8, children: gridItems),
const Text("16 column grid symmetrical."),
ZetaGrid(col: 16, children: gridItems),
const Text("11 to 1 Asymmetrical"),
ZetaGrid(asymmetricWeight: 11, children: gridItems),
const Text("10 to 2 Asymmetrical"),
ZetaGrid(asymmetricWeight: 10, children: gridItems),
const Text("9 to 3 Asymmetrical"),
ZetaGrid(asymmetricWeight: 9, children: gridItems),
const Text("8 to 4 Asymmetrical"),
ZetaGrid(asymmetricWeight: 8, children: gridItems),
const Text("7 to 5 Asymmetrical"),
ZetaGrid(asymmetricWeight: 7, children: gridItems),
const Text("5 to 7 Asymmetrical"),
ZetaGrid(asymmetricWeight: 5, children: gridItems),
const Text("4 to 8 Asymmetrical"),
ZetaGrid(asymmetricWeight: 4, children: gridItems),
const Text("3 to 9 Asymmetrical"),
ZetaGrid(asymmetricWeight: 3, children: gridItems),
const Text("2 to 10 Asymmetrical"),
ZetaGrid(asymmetricWeight: 2, children: gridItems),
const Text("1 to 11 Asymmetrical"),
ZetaGrid(asymmetricWeight: 1, children: gridItems),
const Text("8 Column hybrid"),
const ZetaGrid(hybrid: true, children: [
GridItem(width: 120),
Flexible(child: GridItem()),
GridItem(width: 80),
Flexible(flex: 2, child: GridItem()),
GridItem(width: 76),
Flexible(child: GridItem()),
Flexible(flex: 3, child: GridItem()),
GridItem(width: 40),
]),
],
children: _gridExamples.map((e) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(e.name, style: Theme.of(context).textTheme.headlineSmall),
ZetaGrid(
col: e.col,
noGaps: e.noGaps,
asymmetricWeight: e.asymmetric,
children: e.children != null ? e.children! : gridItems,
),
Container(
color: const Color(0xFFE9E9E9),
padding: const EdgeInsets.all(16),
child: Text(
'ZetaGrid(${e.col != 12 ? 'col:${e.col},' : ''}${e.noGaps ? 'noGaps:true,' : ''}${e.asymmetric != null ? 'asymmetricWeight:${e.asymmetric},' : ''}${e.children != null ? 'children:${e.childrenText},' : ''})',
style: Theme.of(context).textTheme.bodyMedium),
),
const SizedBox(height: 40),
],
);
}).toList(),
);
}

Expand Down
2 changes: 1 addition & 1 deletion lib/src/components/grid.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ class ZetaGrid extends StatelessWidget {
],
);
} else {
final List<Widget> children2 = children;
final List<Widget> children2 = [...children];
if (children.length < col) {
children2.addAll(List.generate(col - children.length, (index) => const SizedBox()));
}
Expand Down
2 changes: 1 addition & 1 deletion pubspec.yaml
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
name: zeta_flutter
description: Zeta
version: 0.0.1+3
version: 0.0.1+4
homepage:

environment:
Expand Down

0 comments on commit b0ad7f1

Please sign in to comment.