diff --git a/examples/material_gallery/assets/section_animation.png b/examples/material_gallery/assets/section_animation.png new file mode 100644 index 00000000000..8ada8cf0c1b Binary files /dev/null and b/examples/material_gallery/assets/section_animation.png differ diff --git a/examples/material_gallery/assets/section_components.png b/examples/material_gallery/assets/section_components.png new file mode 100644 index 00000000000..5fb17bd60fc Binary files /dev/null and b/examples/material_gallery/assets/section_components.png differ diff --git a/examples/material_gallery/assets/section_layout.png b/examples/material_gallery/assets/section_layout.png new file mode 100644 index 00000000000..808a1fdf5ba Binary files /dev/null and b/examples/material_gallery/assets/section_layout.png differ diff --git a/examples/material_gallery/assets/section_patterns.png b/examples/material_gallery/assets/section_patterns.png new file mode 100644 index 00000000000..c78cb8aecc7 Binary files /dev/null and b/examples/material_gallery/assets/section_patterns.png differ diff --git a/examples/material_gallery/assets/section_style.png b/examples/material_gallery/assets/section_style.png new file mode 100644 index 00000000000..3433fb2cead Binary files /dev/null and b/examples/material_gallery/assets/section_style.png differ diff --git a/examples/material_gallery/assets/section_usability.png b/examples/material_gallery/assets/section_usability.png new file mode 100644 index 00000000000..e1ba0aa601f Binary files /dev/null and b/examples/material_gallery/assets/section_usability.png differ diff --git a/examples/material_gallery/flutter.yaml b/examples/material_gallery/flutter.yaml index 853033b08fd..fadd83829c3 100644 --- a/examples/material_gallery/flutter.yaml +++ b/examples/material_gallery/flutter.yaml @@ -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 diff --git a/examples/material_gallery/lib/main.dart b/examples/material_gallery/lib/main.dart index 30c7a248ddf..3301ca3e760 100644 --- a/examples/material_gallery/lib/main.dart +++ b/examples/material_gallery/lib/main.dart @@ -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 colors; final String title; + final String image; + final Map colors; final List 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: [ + 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 { [ new Row( children: [ - 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: [ - 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: [ new GalleryDemo(title: 'Modal Bottom Sheet', builder: (_) => new ModalBottomSheetDemo()), @@ -141,8 +171,16 @@ class GalleryHome extends StatelessComponent { ), new Row( children: [ - 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 + ) ] ) ]