mirror of
https://github.com/flutter/flutter
synced 2024-10-13 11:42:54 +00:00
Added section images to the gallery home page
This commit is contained in:
parent
e4940a0114
commit
e1c53b65f7
BIN
examples/material_gallery/assets/section_animation.png
Normal file
BIN
examples/material_gallery/assets/section_animation.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.1 KiB |
BIN
examples/material_gallery/assets/section_components.png
Normal file
BIN
examples/material_gallery/assets/section_components.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.5 KiB |
BIN
examples/material_gallery/assets/section_layout.png
Normal file
BIN
examples/material_gallery/assets/section_layout.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.7 KiB |
BIN
examples/material_gallery/assets/section_patterns.png
Normal file
BIN
examples/material_gallery/assets/section_patterns.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.2 KiB |
BIN
examples/material_gallery/assets/section_style.png
Normal file
BIN
examples/material_gallery/assets/section_style.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.4 KiB |
BIN
examples/material_gallery/assets/section_usability.png
Normal file
BIN
examples/material_gallery/assets/section_usability.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 10 KiB |
|
@ -1,6 +1,12 @@
|
|||
name: material_gallery
|
||||
assets:
|
||||
- assets/flutter_logo.png
|
||||
- assets/section_animation.png
|
||||
- assets/section_style.png
|
||||
- assets/section_layout.png
|
||||
- assets/section_components.png
|
||||
- assets/section_patterns.png
|
||||
- assets/section_usability.png
|
||||
material-design-icons:
|
||||
- name: navigation/arrow_drop_down
|
||||
- name: navigation/arrow_forward
|
||||
|
|
|
@ -24,10 +24,11 @@ class GalleryDemo {
|
|||
}
|
||||
|
||||
class GallerySection extends StatelessComponent {
|
||||
GallerySection({ this.colors, this.title, this.demos });
|
||||
GallerySection({ this.title, this.image, this.colors, this.demos });
|
||||
|
||||
final Map<int, Color> colors;
|
||||
final String title;
|
||||
final String image;
|
||||
final Map<int, Color> colors;
|
||||
final List<GalleryDemo> demos;
|
||||
|
||||
void showDemo(GalleryDemo demo, BuildContext context, ThemeData theme) {
|
||||
|
@ -81,11 +82,27 @@ class GallerySection extends StatelessComponent {
|
|||
child: new Container(
|
||||
height: 256.0,
|
||||
margin: const EdgeDims.all(4.0),
|
||||
padding: const EdgeDims.only(left: 16.0, bottom: 16.0),
|
||||
decoration: new BoxDecoration(backgroundColor: theme.primaryColor),
|
||||
child: new Align(
|
||||
alignment: const FractionalOffset(0.0, 1.0),
|
||||
child: new Text(title, style: theme.text.title)
|
||||
child: new Column(
|
||||
children: <Widget>[
|
||||
new Flexible(
|
||||
child: new Padding(
|
||||
padding: const EdgeDims.symmetric(horizontal: 12.0),
|
||||
child: new AssetImage(
|
||||
name: image,
|
||||
alignment: const FractionalOffset(0.5, 0.5),
|
||||
fit: ImageFit.contain
|
||||
)
|
||||
)
|
||||
),
|
||||
new Padding(
|
||||
padding: const EdgeDims.all(16.0),
|
||||
child: new Align(
|
||||
alignment: const FractionalOffset(0.0, 1.0),
|
||||
child: new Text(title, style: theme.text.title)
|
||||
)
|
||||
)
|
||||
]
|
||||
)
|
||||
)
|
||||
)
|
||||
|
@ -113,15 +130,28 @@ class GalleryHome extends StatelessComponent {
|
|||
<Widget>[
|
||||
new Row(
|
||||
children: <Widget>[
|
||||
new GallerySection(title: 'Animation', colors: Colors.purple),
|
||||
new GallerySection(title: 'Style', colors: Colors.green)
|
||||
new GallerySection(
|
||||
title: 'Animation',
|
||||
image: 'assets/section_animation.png',
|
||||
colors: Colors.purple
|
||||
),
|
||||
new GallerySection(
|
||||
title: 'Style',
|
||||
image: 'assets/section_style.png',
|
||||
colors: Colors.green
|
||||
)
|
||||
]
|
||||
),
|
||||
new Row(
|
||||
children: <Widget>[
|
||||
new GallerySection(title: 'Layout', colors: Colors.pink),
|
||||
new GallerySection(
|
||||
title: 'Layout',
|
||||
image: 'assets/section_layout.png',
|
||||
colors: Colors.pink
|
||||
),
|
||||
new GallerySection(
|
||||
title: 'Components',
|
||||
image: 'assets/section_components.png',
|
||||
colors: Colors.amber,
|
||||
demos: <GalleryDemo>[
|
||||
new GalleryDemo(title: 'Modal Bottom Sheet', builder: (_) => new ModalBottomSheetDemo()),
|
||||
|
@ -141,8 +171,16 @@ class GalleryHome extends StatelessComponent {
|
|||
),
|
||||
new Row(
|
||||
children: <Widget>[
|
||||
new GallerySection(title: 'Pattern', colors: Colors.cyan),
|
||||
new GallerySection(title: 'Usability', colors: Colors.lightGreen)
|
||||
new GallerySection(
|
||||
title: 'Patterns',
|
||||
image: 'assets/section_patterns.png',
|
||||
colors: Colors.cyan
|
||||
),
|
||||
new GallerySection(
|
||||
title: 'Usability',
|
||||
image: 'assets/section_usability.png',
|
||||
colors: Colors.lightGreen
|
||||
)
|
||||
]
|
||||
)
|
||||
]
|
||||
|
|
Loading…
Reference in a new issue