in18，block居中

lib/generated/intl/messages_en.dart

@@ -19,12 +19,13 @@ typedef String MessageIfAbsent(String messageStr, List<dynamic> args);
 class MessageLookup extends MessageLookupByLibrary {
   String get localeName => 'en';
 
-  static m0(name) => "Welcome ${name}";
-
   final messages = _notInlinedMessages(_notInlinedMessages);
   static _notInlinedMessages(_) => <String, Function> {
-    "pageHomeConfirm" : MessageLookupByLibrary.simpleMessage("Confirm"),
-    "pageHomeWelcome" : m0,
-    "titleName" : MessageLookupByLibrary.simpleMessage("2048")
+    "btnNewGame" : MessageLookupByLibrary.simpleMessage("New Game"),
+    "labelBest" : MessageLookupByLibrary.simpleMessage("BEST"),
+    "labelScore" : MessageLookupByLibrary.simpleMessage("SCORE"),
+    "titleName" : MessageLookupByLibrary.simpleMessage("2048"),
+    "titleWelDesc" : MessageLookupByLibrary.simpleMessage("Join and get to the 2048 tile!"),
+    "titleWelcome" : MessageLookupByLibrary.simpleMessage("Play 2048 Game flutter")
   };
 }

lib/generated/intl/messages_zh.dart

@@ -19,12 +19,13 @@ typedef String MessageIfAbsent(String messageStr, List<dynamic> args);
 class MessageLookup extends MessageLookupByLibrary {
   String get localeName => 'zh';
 
-  static m0(name) => "Welcome ${name}";
-
   final messages = _notInlinedMessages(_notInlinedMessages);
   static _notInlinedMessages(_) => <String, Function> {
-    "pageHomeConfirm" : MessageLookupByLibrary.simpleMessage("Confirm"),
-    "pageHomeWelcome" : m0,
-    "titleName" : MessageLookupByLibrary.simpleMessage("2048")
+    "btnNewGame" : MessageLookupByLibrary.simpleMessage("重新开始"),
+    "labelBest" : MessageLookupByLibrary.simpleMessage("最高得分"),
+    "labelScore" : MessageLookupByLibrary.simpleMessage("本次得分"),
+    "titleName" : MessageLookupByLibrary.simpleMessage("2048"),
+    "titleWelDesc" : MessageLookupByLibrary.simpleMessage("欢迎使用2048小游戏。"),
+    "titleWelcome" : MessageLookupByLibrary.simpleMessage("Play 2048 Game flutter")
   };
 }

lib/generated/l10n.dart

@@ -45,23 +45,53 @@ class S {
     );
   }
 
-  /// `Confirm`
-  String get pageHomeConfirm {
+  /// `Play 2048 Game flutter`
+  String get titleWelcome {
     return Intl.message(
-      'Confirm',
-      name: 'pageHomeConfirm',
+      'Play 2048 Game flutter',
+      name: 'titleWelcome',
       desc: '',
       args: [],
     );
   }
 
-  /// `Welcome {name}`
-  String pageHomeWelcome(Object name) {
+  /// `Join and get to the 2048 tile!`
+  String get titleWelDesc {
     return Intl.message(
-      'Welcome $name',
-      name: 'pageHomeWelcome',
+      'Join and get to the 2048 tile!',
+      name: 'titleWelDesc',
       desc: '',
-      args: [name],
+      args: [],
+    );
+  }
+
+  /// `BEST`
+  String get labelBest {
+    return Intl.message(
+      'BEST',
+      name: 'labelBest',
+      desc: '',
+      args: [],
+    );
+  }
+
+  /// `SCORE`
+  String get labelScore {
+    return Intl.message(
+      'SCORE',
+      name: 'labelScore',
+      desc: '',
+      args: [],
+    );
+  }
+
+  /// `New Game`
+  String get btnNewGame {
+    return Intl.message(
+      'New Game',
+      name: 'btnNewGame',
+      desc: '',
+      args: [],
     );
   }
 }

lib/l10n/intl_en.arb

@@ -1,5 +1,8 @@
 {
-    "titleName":"2048",
-    "pageHomeConfirm": "Confirm",
-    "pageHomeWelcome": "Welcome {name}"
+    "titleName": "2048",
+    "titleWelcome": "Play 2048 Game flutter",
+    "titleWelDesc": "Join and get to the 2048 tile!",
+    "labelBest": "BEST",
+    "labelScore": "SCORE",
+    "btnNewGame": "New Game"
 }

lib/l10n/intl_zh.arb

@@ -1,5 +1,8 @@
 {
     "titleName": "2048",
-    "pageHomeConfirm": "Confirm",
-    "pageHomeWelcome": "Welcome {name}"
+    "titleWelcome": "Play 2048 Game flutter",
+    "titleWelDesc": "欢迎使用2048小游戏。",
+    "labelBest": "最高得分",
+    "labelScore": "本次得分",
+    "btnNewGame": "重新开始"
 }

lib/model/config.dart

@@ -2,6 +2,7 @@ import 'package:flutter/cupertino.dart';
 
 class CustomColor {
   static Color textColor = Color(0xfffaf8ef);
+  
 }
 
 class BaseConfig {}

lib/pages/index_page.dart

@@ -1,11 +1,12 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_2048/service/gameInit.dart';
-import 'package:flutter_2048/views/blocks.dart';
-import 'package:flutter_2048/views/scores.dart';
 import 'package:flutter_redux/flutter_redux.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:redux/redux.dart';
 import 'package:redux_thunk/redux_thunk.dart';
+
+import 'package:flutter_2048/service/gameInit.dart';
+import 'package:flutter_2048/views/blocks.dart';
+import 'package:flutter_2048/views/scores.dart';
 import '../views/game_bg.dart';
 import '../views/mode_selector.dart';
 import '../views/playground.dart';

lib/router/routes.dart

@@ -0,0 +1,16 @@
+import 'package:flutter/cupertino.dart';
+
+class Routes {
+  static final Router router = new Router(
+    routerDelegate: null,
+  );
+  static const ROOT = '/';
+  static Routes _instance;
+
+  static Routes get instance {
+    if (_instance == null) {
+      _instance = new Routes();
+    }
+    return _instance;
+  }
+}

lib/utils/device.dart

@@ -4,7 +4,6 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
 class Device {
   static getRatio(int value) {
     int uiwidth = value is int ? value : 750;
-    // return ScreenUtil.mediaQueryData.size.width / uiwidth;
     return ScreenUtil().uiSize.width / uiwidth;
   }
 
@@ -17,13 +16,11 @@ class Device {
   }
 
   static getTopPadding() {
-    // return ScreenUtil.mediaQueryData.padding.top;
     return ScreenUtil().uiSize.height;
   }
 
   static getWidth() {
     return ScreenUtil().uiSize.width;
-    // return ScreenUtil.mediaQueryData.size.width;
   }
 
   static Platform platform = Platform();

lib/utils/screen.dart

@@ -13,4 +13,4 @@ class Screen {
   }
 
   static double get stageWidth => Device.getWidth() - Display.borderMargin * 2;
-}
+}

lib/views/blocks.dart

@@ -11,6 +11,7 @@ class Blocks extends StatefulWidget {
 }
 
 class _BlocksState extends State<Blocks> with TickerProviderStateMixin {
+  
   @override
   Widget build(BuildContext context) {
     return StoreConnector<GameState, BlocksProps>(
@@ -22,13 +23,15 @@ class _BlocksState extends State<Blocks> with TickerProviderStateMixin {
       builder: (context, props) {
         var blockFactory = BlockFactory(this, props.mode);
         blockFactory.play();
-        return Container(
-          width: Screen.stageWidth,
-          height: Screen.stageWidth,
-          padding: EdgeInsets.fromLTRB(props.padding, props.padding, 0, 0),
-          child: Stack(
-            fit: StackFit.expand,
-            children: getBlocks(blockFactory, props),
+        return Center(
+          child: Container(
+            width: Screen.stageWidth,
+            height: Screen.stageWidth,
+            padding: EdgeInsets.fromLTRB(props.padding, props.padding, 0, 0),
+            child: Stack(
+              fit: StackFit.expand,
+              children: getBlocks(blockFactory, props),
+            ),
           ),
         );
       },

lib/views/game_bg.dart

@@ -2,14 +2,14 @@ import 'package:flutter/material.dart';
 import 'package:flutter_redux/flutter_redux.dart';
 import '../store/game_state.dart';
 import '../utils/screen.dart';
+
 /// 游戏格子背景
 class GameBg extends StatefulWidget {
   @override
-  State<StatefulWidget> createState() => GameBgState();
+  State<StatefulWidget> createState() => _GameBgState();
 }
 
-class GameBgState extends State<StatefulWidget> {
-
+class _GameBgState extends State<StatefulWidget> {
   @override
   Widget build(BuildContext context) {
     return StoreConnector<GameState, GameBgProps>(
@@ -19,14 +19,18 @@ class GameBgState extends State<StatefulWidget> {
         mode: store.state.mode,
       ),
       builder: (context, vm) {
-        return Container(
-          padding: EdgeInsets.fromLTRB(vm.borderWidth, vm.borderWidth, 0, 0),
-          decoration: BoxDecoration(
-            color: const Color(0xffbbada0),
-            border: Border.all(color: Colors.transparent, width: 0),
-            borderRadius: BorderRadius.circular(5),
+        var width = Screen.stageWidth;
+        return Center(
+          child: Container(
+            width: width,
+            padding: EdgeInsets.fromLTRB(vm.borderWidth, vm.borderWidth, 0, 0),
+            decoration: BoxDecoration(
+              color: const Color(0xffbbada0),
+              border: Border.all(color: Colors.transparent, width: 0),
+              borderRadius: BorderRadius.circular(5),
+            ),
+            child: getGrid(vm),
           ),
-          child: getGrid(vm),
         );
       },
     );
@@ -63,9 +67,9 @@ class GameBgState extends State<StatefulWidget> {
 }
 
 class GameBgProps {
-  double borderWidth;
-  double blockWidth;
-  int mode;
+  double borderWidth; //边框大小
+  double blockWidth; //块大小
+  int mode; //游戏模式，3*3 4*4 6*6
 
   GameBgProps({this.borderWidth, this.blockWidth, this.mode});
 }

lib/views/playground.dart

@@ -29,32 +29,34 @@ class Playground extends StatelessWidget {
       },
       builder: (context, props) {
         return props.end != true
-            ? GestureDetector(
-                onHorizontalDragStart: (evt) => onDragStart(evt, props),
-                onHorizontalDragEnd: (evt) => onHorizontalDragEnd(evt, props),
-                onVerticalDragStart: (evt) => onDragStart(evt, props),
-                onVerticalDragEnd: (evt) => onVerticalDragEnd(evt, props),
-                child: Container(
-                  color: Colors.transparent,
-                  height: Screen.stageWidth,
+            ? Center(
+              child: GestureDetector(
+                  onHorizontalDragStart: (evt) => onDragStart(evt, props),
+                  onHorizontalDragEnd: (evt) => onHorizontalDragEnd(evt, props),
+                  onVerticalDragStart: (evt) => onDragStart(evt, props),
+                  onVerticalDragEnd: (evt) => onVerticalDragEnd(evt, props),
+                  child: Container(
+                    color: Colors.transparent,
+                    height: Screen.stageWidth,
+                  ),
                 ),
-              )
-            : Container(
-                decoration: BoxDecoration(
-                    borderRadius: BorderRadius.circular(5),
-                    color: Color.fromRGBO(255, 255, 255, 0.4)),
-                height: Screen.stageWidth,
-                child: Center(
-                  child: Text(
-                    'Game Over',
-                    style: TextStyle(
-                      fontSize: 50,
-                      color: Color(0xff776e65),
-                      fontWeight: FontWeight.bold,
+            )
+            : Center(child: Container(
+                  decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(5),
+                      color: Color.fromRGBO(255, 255, 255, 0.4)),
+                  height: Screen.stageWidth,
+                  child: Center(
+                    child: Text(
+                      'Game Over',
+                      style: TextStyle(
+                        fontSize: 50,
+                        color: Color(0xff776e65),
+                        fontWeight: FontWeight.bold,
+                      ),
                     ),
                   ),
-                ),
-              );
+                ),);
       },
     );
   }

lib/views/scores.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_2048/service/gameInit.dart';
 import 'package:flutter_2048/store/game_state.dart';
 import 'package:flutter_redux/flutter_redux.dart';
+import 'package:flutter_2048/generated/l10n.dart';
 
 class Scores extends StatelessWidget {
   @override
@@ -50,7 +51,7 @@ class Scores extends StatelessWidget {
                       child: Column(
                         children: <Widget>[
                           Text(
-                            'SCORE',
+                            S.of(context).labelScore,
                             style: TextStyle(
                                 color: Color(0xffeee4da),
                                 fontWeight: FontWeight.bold),
@@ -74,7 +75,7 @@ class Scores extends StatelessWidget {
                       child: Column(
                         children: <Widget>[
                           Text(
-                            'BEST',
+                            S.of(context).labelBest,
                             style: TextStyle(
                                 color: Color(0xffeee4da),
                                 fontWeight: FontWeight.bold),
@@ -99,13 +100,13 @@ class Scores extends StatelessWidget {
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: <Widget>[
                     Text(
-                      'Play 2048 Game flutter',
+                      S.of(context).titleWelcome,
                       style: TextStyle(
                           color: Color(0xff776e65),
                           fontWeight: FontWeight.bold),
                     ),
                     Text(
-                      'Join and get to the 2048 tile!',
+                      S.of(context).titleWelDesc,
                       style: TextStyle(color: Color(0xff776e65)),
                     ),
                   ],
@@ -115,7 +116,7 @@ class Scores extends StatelessWidget {
                   textColor: Colors.white,
                   onPressed: () => props.reset(),
                   child: Text(
-                    'New Game',
+                    S.of(context).btnNewGame,
                     style: TextStyle(fontWeight: FontWeight.bold),
                   ),
                 )