Flutter 基于BLoC完整Flutter App項(xiàng)目

本項(xiàng)目包含啟動頁,引導(dǎo)頁,主題色,國際化,Bloc,RxDart。擁有較好的項(xiàng)目結(jié)構(gòu),比較規(guī)范的代碼。App擁有精致的UI界面,統(tǒng)一的交互,側(cè)滑退出,列表和Web界面均提供快速滾動至頂部功能。
作者初衷是為大家提供一個比較規(guī)范的Flutter項(xiàng)目示例。
有關(guān)項(xiàng)目最新動態(tài),可以關(guān)注App內(nèi)第一條Hot Item信息。

App目錄結(jié)構(gòu)

  • |--lib
    • |-- blocs (bloc相關(guān))
    • |-- common (常用類,例如常量Constant)
    • |-- data (網(wǎng)絡(luò)數(shù)據(jù)層)
    • |-- db (數(shù)據(jù)庫)
    • |-- event (事件類)
    • |-- models (實(shí)體類)
    • |-- res (資源文件,string,colors,dimens,styles)
    • |-- ui (界面相關(guān)page,dialog,widgets)
    • |-- utils (工具類)

data網(wǎng)絡(luò)數(shù)據(jù)層

  • |--data
    • |-- api (url字段)
    • |-- net (單例DioUtil)
    • |-- protocol (請求與返回實(shí)體類)
    • |-- repository (接口請求&解析)

api

class WanAndroidApi {
  /// 首頁banner http://www.wanandroid.com/banner/json
  static const String BANNER = "banner";
  static const String USER_REGISTER = "user/register"; //注冊
  static const String USER_LOGIN = "user/login"; //登錄
  static const String USER_LOGOUT = "user/logout"; //退出

  // 拼接url
  static String getPath({String path: '', int page, String resType: 'json'}) {
    StringBuffer sb = new StringBuffer(path);
    if (page != null) {
      sb.write('/$page');
    }
    if (resType != null && resType.isNotEmpty) {
      sb.write('/$resType');
    }
    return sb.toString();
  }
}

請求與返回實(shí)體類 protocol

class LoginReq {
  String username;
  String password;

  LoginReq(this.username, this.password);

  LoginReq.fromJson(Map<String, dynamic> json)
      : username = json['username'],
        password = json['password'];

  Map<String, dynamic> toJson() => {
    'username': username,
    'password': password,
  };

  @override
  String toString() {
    StringBuffer sb = new StringBuffer('{');
    sb.write("\"username\":\"$username\"");
    sb.write(",\"password\":$password");
    sb.write('}');
    return sb.toString();
  }
}

接口請求&解析 repository

 class WanRepository {
  Future<List<BannerModel>> getBanner() async {
    BaseResp<List> baseResp = await DioUtil().request<List>(
        Method.get, WanAndroidApi.getPath(path: WanAndroidApi.BANNER));
    List<BannerModel> bannerList;
    if (baseResp.code != Constant.STATUS_SUCCESS) {
      return new Future.error(baseResp.msg);
    }
    if (baseResp.data != null) {
      bannerList = baseResp.data.map((value) {
        return BannerModel.fromJson(value);
      }).toList();
    }
    return bannerList;
  }
}

資源文件 res

  • |--res
    • |-- colors.dart
    • |-- dimens.dart
    • |-- strings.dart
    • |-- styles.dart

colors.dart

class Colours {
  static const Color app_main = Color(0xFF666666);  
  
  static const Color text_dark = Color(0xFF333333);
  static const Color text_normal = Color(0xFF666666);
  static const Color text_gray = Color(0xFF999999);  
}

dimens.dart

class Dimens {
  static const double font_sp12 = 12;
  static const double font_sp14 = 14;
  static const double font_sp16 = 16;
  
  static const double gap_dp5 = 5;
  static const double gap_dp10 = 10;
}

strings.dart

class Ids {
  static const String titleHome = 'title_home';
}  
Map<String, Map<String, Map<String, String>>> localizedValues = {
  'en': {
    'US': {
      Ids.titleHome: 'Home',
    }
  },
  'zh': {
    'CN': {
      Ids.titleHome: '主頁',
    },
    'HK': {
      Ids.titleHome: '主頁',
    },
    'TW': {
      Ids.titleHome: '主頁',
    }
  }
};

styles.dart

class TextStyles {
  static TextStyle listTitle = TextStyle(
    fontSize: Dimens.font_sp16,
    color: Colours.text_dark,
    fontWeight: FontWeight.bold,
  );
  static TextStyle listContent = TextStyle(
    fontSize: Dimens.font_sp14,
    color: Colours.text_normal,
  );
  static TextStyle listExtra = TextStyle(
    fontSize: Dimens.font_sp12,
    color: Colours.text_gray,
  );
}
//  間隔
class Gaps {
  // 水平間隔
  static Widget hGap5 = new SizedBox(width: Dimens.gap_dp5);
  static Widget hGap10 = new SizedBox(width: Dimens.gap_dp10);
  // 垂直間隔
  static Widget vGap5 = new SizedBox(height: Dimens.gap_dp5);
  static Widget vGap10 = new SizedBox(height: Dimens.gap_dp10);
}

Flutter 國際化相關(guān)

fluintl 是一個為應(yīng)用提供國際化的庫,可快速集成實(shí)現(xiàn)應(yīng)用多語言。該庫封裝了一個國際化支持類,通過提供統(tǒng)一方法getString(id)獲取字符串。

// 在MyApp initState配置多語言資源
setLocalizedValues(localizedValues); //配置多語言資源
// 在MaterialApp指定localizationsDelegates和supportedLocales
MaterialApp(  
   home: MyHomePage(),  
   localizationsDelegates: [  
   GlobalMaterialLocalizations.delegate,  
   GlobalWidgetsLocalizations.delegate,  
   CustomLocalizations.delegate //設(shè)置本地化代理     
   ],  
   supportedLocales: CustomLocalizations.supportedLocales,//設(shè)置支持本地化語言集合     
); 
// 字符串獲取
IntlUtil.getString(context, Ids.titleHome);
CustomLocalizations.of(context).getString(StringIds.titleHome);

Flutter 屏幕適配 ScreenUtil

方案一、不依賴context

步驟 1
//如果設(shè)計(jì)稿尺寸默認(rèn)配置一致,無需該設(shè)置。  配置設(shè)計(jì)稿尺寸 默認(rèn) 360.0 / 640.0 / 3.0
setDesignWHD(_designW,_designH,_designD);  
  
步驟 2
// 在MainPageState build 調(diào)用MediaQuery.of(context)
class MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    // 在 MainPageState build 調(diào)用 MediaQuery.of(context)
    MediaQuery.of(context);
    return new Scaffold(
      appBar: new AppBar(),
    );
  }
}  
  
步驟 3
ScreenUtil.getInstance().screenWidth
ScreenUtil.getInstance().screenHeight
//屏幕適配相關(guān)  
ScreenUtil.getInstance().getWidth(size); //返回根據(jù)屏幕寬適配后尺寸(單位 dp or pt)
ScreenUtil.getInstance().getHeight(size); //返回根據(jù)屏幕高適配后尺寸 (單位 dp or pt)
ScreenUtil.getInstance().getWidthPx(sizePx); //sizePx 單位px
ScreenUtil.getInstance().getHeightPx(sizePx); //sizePx 單位px
ScreenUtil.getInstance().getSp(fontSize); //返回根據(jù)屏幕寬適配后字體尺寸

方案二、依賴context

//如果設(shè)計(jì)稿尺寸默認(rèn)配置一致,無需該設(shè)置。  配置設(shè)計(jì)稿尺寸 默認(rèn) 360.0 / 640.0 / 3.0
setDesignWHD(_designW,_designH,_designD);  

ScreenUtil.getScreenW(context); //屏幕 寬
ScreenUtil.getScreenH(context); //屏幕 高
//屏幕適配相關(guān)  
ScreenUtil.getScaleW(context, size); //返回根據(jù)屏幕寬適配后尺寸(單位 dp or pt)
ScreenUtil.getScaleH(context, size); //返回根據(jù)屏幕高適配后尺寸 (單位 dp or pt)
ScreenUtil.getScaleSp(context, size) ;//返回根據(jù)屏幕寬適配后字體尺寸

Flutter 數(shù)據(jù)存儲 SpUtil

SpUtil : 單例"同步" SharedPreferences 工具類。
項(xiàng)目中為大家提供SpHelper,方便存取實(shí)體對象類。

// 存儲SplashModel實(shí)體對象
SplashModel model = new SplashModel();
SpHelper.putObject(Constant.KEY_SPLASH_MODEL, model); 

// 獲取SplashModel實(shí)體對象
SplashModel model = SpHelper.getSplashModel(); 

class SpHelper {
 // 存儲Obj,T 用于區(qū)分存儲類型
  static void putObject<T>(String key, Object value) {
    switch (T) {
      case int:
        SpUtil.putInt(key, value);
        break;
      case double:
        SpUtil.putDouble(key, value);
        break;
      case bool:
        SpUtil.putBool(key, value);
        break;
      case String:
        SpUtil.putString(key, value);
        break;
      case List:
        SpUtil.putStringList(key, value);
        break;
      default:
        SpUtil.putString(key, value == null ? "" : json.encode(value));
        break;
    }
  }

  static SplashModel getSplashModel() {
    String _splashModel = SpUtil.getString(Constant.KEY_SPLASH_MODEL);
    if (ObjectUtil.isNotEmpty(_splashModel)) {
      Map userMap = json.decode(_splashModel);
      return SplashModel.fromJson(userMap);
    }
    return null;
  }
}

主界面

啟動頁

側(cè)滑Back

快速滾動到頂部

分類頁面

國際化

主題色

GitHub : flutter_wanandroid

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容