Add select image page

assets/files/images.json

+{
+  "images": [
+    "acb90f2491a73ba81e9f3d540ba66ffb",
+    "78edb7a85c822c76eae85da9fcd31324",
+    "0962959cf3392e84b9816de7fd80b656",
+    "7c2f42e74e249ce9dad4a0802dde22c2",
+    ""
+  ]
+}

lib/provider/data.dart

@@ -2,21 +2,22 @@ import 'package:flutter/foundation.dart';
 
 class Data extends ChangeNotifier {
 
-  // randomization
-  bool _searchingImage = false;
+  // application data
+  List _images = [];
+
   String _image = '';
 
-  bool get searchingImage => _searchingImage;
+  String get image => _image;
 
-  set searchingImage(bool value) {
-    _searchingImage = value;
+  set updateImage(String value) {
+    _image = value;
     notifyListeners();
   }
 
-  String get image => _image;
+  List get images => _images;
 
-  set updateImage(String value) {
-    _image = value;
+  set updateImages(List value) {
+    _images = value;
     notifyListeners();
   }
 

lib/screens/home.dart

@@ -2,23 +2,75 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
 import '../provider/data.dart';
+import '../utils/get_images_list.dart';
 
 class Home extends StatelessWidget {
   static const String id = 'home';
 
-  @override
-  Widget build(BuildContext context) {
-    Data _myProvider = Provider.of<Data>(context);
+  Future<void> resetGame(Data myProvider) async {
+    myProvider.updateImage = '';
+  }
 
-    return Scaffold(
-      appBar: AppBar(
-        title: Text('Puzzle game'),
+  Future<void> getImagesList(Data myProvider) async {
+    GetImagesList getImagesList;
+    getImagesList = GetImagesList();
+    await getImagesList.init();
+    if (getImagesList.images != null) {
+      myProvider.updateImages = getImagesList.images;
+    }
+  }
+
+  Container _buildImageSelectorItem(Data myProvider, String image) {
+    double imageSize = 200;
+    String imageAsset = 'assets/images/'+image+'.png';
+
+    return Container(
+      child: FlatButton(
+        child: Container(
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(8),
+            border: Border.all(
+              color: Colors.blue[200],
+              width: 8,
             ),
-      body: Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            Container(
+          ),
+          margin: EdgeInsets.all(2),
+          child: Image(
+            image: AssetImage(imageAsset),
+            width: imageSize,
+            height: imageSize,
+            fit: BoxFit.fill
+          ),
+        ),
+        onPressed: () {
+          myProvider.updateImage = image;
+        },
+      ),
+    );
+  }
+
+  Container _buildImageSelector(Data myProvider) {
+    if (myProvider.images.length == 0) {
+      getImagesList(myProvider);
+    }
+    List images = myProvider.images;
+
+    return Container(
+      padding: EdgeInsets.all(5),
+      child: ListView(
+        children: [
+          for (var image in images)
+            _buildImageSelectorItem(myProvider, image),
+        ],
+      ),
+    );
+  }
+
+  Container _buildGameWidget(Data myProvider) {
+    double imageSize = 250;
+    String imageAsset = 'assets/images/'+myProvider.image+'.png';
+
+    return Container(
       child: Column(
         mainAxisSize: MainAxisSize.min,
         mainAxisAlignment: MainAxisAlignment.center,
@@ -34,24 +86,41 @@ class Home extends StatelessWidget {
                 width: 4,
               ),
             ),
-                    child: FlatButton(
-                      child: Text(
-                        '🎲',
-                        textAlign: TextAlign.center,
-                        style: TextStyle(
-                          fontSize: 50,
-                          fontWeight: FontWeight.w600,
-                          color: Colors.black,
-                        ),
-                      ),
+            child: Image(
+              image: AssetImage(imageAsset),
+              width: imageSize,
+              height: imageSize,
+              fit: BoxFit.fill
             ),
           ),
         ],
       ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    Data _myProvider = Provider.of<Data>(context);
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('Puzzle'),
+        actions: <Widget>[
+          _myProvider.image == ''
+          ? Text('')
+          : IconButton(
+            icon: const Icon(Icons.arrow_left_outlined),
+            onPressed: () => resetGame(_myProvider),
           ),
         ],
       ),
+      body: SafeArea(
+        child: Center(
+          child: _myProvider.image == ''
+            ? _buildImageSelector(_myProvider)
+            : _buildGameWidget(_myProvider),
         ),
+      )
     );
   }
 }

lib/utils/get_images_list.dart

+import 'dart:async';
+import 'dart:convert';
+import 'package:flutter/services.dart';
+import 'dart:math' show Random;
+
+class GetImagesList {
+  GetImagesList();
+
+  List _images;
+
+  init() async {
+    await imagesFromLocalFile();
+  }
+
+  Future<void> imagesFromLocalFile() async {
+    String jsonString;
+    try {
+      jsonString = await rootBundle.loadString('assets/files/images.json');
+      final jsonResponse = await json.decode(jsonString);
+      List imagesList = jsonResponse['images'];
+      _images = imagesList;
+    } catch (e) {
+      _images = [];
+    }
+
+    // Remove empty images
+    _images.removeWhere((value) => (value == ''));
+  }
+
+  List get images => _images;
+}

pubspec.yaml

@@ -19,3 +19,4 @@ flutter:
   uses-material-design: true
   assets:
     - assets/files/
+    - assets/images/