寮虹儓鎺ㄨ崘5涓狥lutter閲嶇寮€婧愰」鐩紒

Posted 2021-04-29 寮€鍙戣€呮妧鏈墠绾?/a>

鐐瑰嚮鈥?/span>寮€鍙戣€呮妧鏈墠绾?/span>鈥濓紝閫夋嫨鈥滄槦鏍囸煍濃€?/span>

鍦ㄧ湅|鏄熸爣|鐣欒█,  鐪熺埍

鏉ヨ嚜锛欸itHub涓枃绀惧尯

澶у濂斤紝鎴戞槸hub鍝ワ紝杩戝勾鏉ワ紝闅忕潃绉诲姩鏅鸿兘璁惧鐨勫揩閫熸櫘鍙婏紝绉诲姩澶氱缁熶竴寮€鍙戞鏋跺凡鎴愪负涓€涓儹闂ㄨ瘽棰樸€?/span>杩欓噷涓哄ぇ瀹舵暣鐞嗕簡5涓狥lutter浼樿川鐨勫紑婧愰」鐩紝甯屾湜瀵瑰ぇ瀹舵湁甯姪

1.Flutter绮句豢鎶栭煶

Flutter绮句豢鎶栭煶寮€婧愪簡锛屽乏婊戞悳绱紝鍙虫粦涓汉涓績锛屼笂涓嬫粦鍔ㄥ埛瑙嗛锛屽弻鍑荤偣璧炲啋鐖卞績锛屾棤鏁岀簿浠匡紝鎰熻阿鐐筍tar銆?/span>

鈼?nbsp;  搴旂敤鎴浘

鈼?nbsp;  瀹炵幇鍔熻兘

• 涓婁笅鍒疯棰戯紝瑙嗛浼氳嚜鍔ㄥ姞杞藉皝闈?/span>

• 宸﹀彸婊戝姩鍘绘悳绱笌涓汉涓績

• 鍙屽嚮鍐掔埍蹇冪偣璧?/span>

• 鐪嬭瘎璁?/span>

• 鍒囨崲搴曢儴Tabbar

鈼?nbsp;  椤圭洰缁撴瀯

渚濊禆锛?/span>

  # 鍔犺浇鍔ㄧ敾搴?濂藉儚鏀圭増涔嬪悗灏辨病鐢ㄥ埌浜?
  flutter_spinkit: ^4.1.2
  # Bilibili寮€婧愮殑瑙嗛鎾斁缁勪欢
  fijkplayer: ^0.8.3
  # 鍩虹鐨勯€忔槑鍔ㄧ敾鐐瑰嚮鏁堟灉
  tapped: any
  # map瀹夊叏鍙栧€?/span>
  safemap: any

涓昏鏂囦欢锛?/span>

./lib
鈹溾攢鈹€ main.dart
鈹溾攢鈹€ mock
鈹?nbsp;  鈹斺攢鈹€ video.dart # 鍋囨暟鎹?/span>
鈹溾攢鈹€ other
鈹?nbsp;  鈹斺攢鈹€ bottomSheet.dart # 淇敼浜嗙郴缁烞ottomSheet鐨勯珮搴?/span>
鈹溾攢鈹€ pages
鈹?nbsp;  鈹溾攢鈹€ cameraPage.dart # 鎷嶆憚椤碉紙娌℃湁瀹為檯鍔熻兘锛?/span>
鈹?nbsp;  鈹溾攢鈹€ followPage.dart  # 鐣?/span>
鈹?nbsp;  鈹溾攢鈹€ homePage.dart # 涓婚〉闈紝鍖呭惈tikTokScaffold鐨勫疄闄呭簲鐢ㄥ姛鑳?/span>
鈹?nbsp;  鈹溾攢鈹€ msgDetailListPage.dart # 鐣?/span>
鈹?nbsp;  鈹溾攢鈹€ msgPage.dart # 鐣?/span>
鈹?nbsp;  鈹溾攢鈹€ searchPage.dart # 鐣?/span>
鈹?nbsp;  鈹溾攢鈹€ todoPage.dart # 鐣?/span>
鈹?nbsp;  鈹溾攢鈹€ userDetailPage.dart # 鐣?/span>
鈹?nbsp;  鈹溾攢鈹€ userPage.dart # 鐣?/span>
鈹?nbsp;  鈹斺攢鈹€ walletPage.d # 鐣?/span>
鈹溾攢鈹€ style
鈹?nbsp;  鈹溾攢鈹€ style.dart # 鍏ㄥ眬鏂囧瓧澶у皬涓庨鑹?/span>
鈹?nbsp;  鈹斺攢鈹€ text.dart # 涓昏鐨勫嚑涓枃瀛楁牱寮?/span>
鈹斺攢鈹€ views
    鈹溾攢鈹€ backButton.dart # iOS褰㈢姸鐨勮繑鍥炴寜閽粍浠?/span>
    鈹溾攢鈹€ loadingButton.dart # 鍙互璁剧疆涓鸿浇鍏ユ牱寮忕殑鎸夐挳缁勪欢
    鈹溾攢鈹€ selectText.dart # 鍙缃负鈥滈€変腑鈥濇垨鑰呪€滄湭閫変腑鈥濇牱寮忕殑鏂囧瓧
    鈹溾攢鈹€ tikTokCommentBottomSheet.dart # 浠縏iktok璇勮鏍峰紡
    鈹溾攢鈹€ tikTokHeader.dart # 浠縏iktok椤堕儴鍒囨崲缁勪欢
    鈹溾攢鈹€ tikTokScaffold.dart # 浠縏iktok鏍稿績鑴氭墜鏋讹紝灏佽浜嗘墜鍔夸笌鍒囨崲绛夊姛鑳斤紝鏈韩涓嶅寘鍚玌I鍐呭
    鈹溾攢鈹€ tikTokVideo.dart # 浠縏iktok鐨勮棰慤I鏍峰紡灏佽锛屼笉鍖呭惈瑙嗛鎾斁
    鈹溾攢鈹€ tikTokVideoButtonColumn.dart # 浠縏iktok瑙嗛鍙充晶鐨勫ご鍍忎笌鐐硅禐绛夋寜閽垪鐨勭粍浠?/span>
    鈹溾攢鈹€ tikTokVideoGesture.dart # 浠縏iktok鐨勫弻鍑荤偣璧炴晥鏋?/span>
    鈹溾攢鈹€ tikTokVideoPlayer.dart # 瑙嗛鎾斁椤甸潰锛屽甫鏈夋帶鍒舵粦鍔ㄧ殑VideoListController绫?/span>
    鈹溾攢鈹€ tiktokTabBar.dart # 浠縏iktok鐨勫簳閮═abbar缁勪欢
    鈹溾攢鈹€ tilTokAppBar.dart # 浠縏iktok鐨凙ppbar缁勪欢
    鈹溾攢鈹€ topToolRow.dart # 鐢ㄦ埛椤甸潰鐨勯《閮ㄧ姸鎬侊紝鍦╰ab鍒囨崲鍒皍ser椤甸潰鏃堕殣钘忚繑鍥炴寜閽?/span>
    鈹斺攢鈹€ userMsgRow.dart # 涓€鏉＄敤鎴蜂俊鎭殑鏍峰紡缁勪欢

https://github.com/mjl0602/flutter_tiktok

2.Flutter鏂楅奔APP

鈼?nbsp;  搴旂敤鎴浘

鈼?nbsp;  涓昏娑电洊鍔熻兘

• 婊戝姩鐘舵€佸鑸€佽疆鎾浘

• 绉诲姩绔痯x鍏煎

• 灏佽HTTP銆両O缂撳瓨鎿嶄綔

• 椤甸潰璺敱浼犲€?/span>

• bloc鍏ㄥ眬鐘舵€佺鐞?/span>

• 绀肩墿妯箙鍔ㄧ敾闃熷垪

• 寮瑰箷娑堟伅婊氬姩

• 鎺ュ叆闈欐€佽棰戞祦

• 涔濆鏍兼娊濂栨父鎴?/span>

• 鐓х墖閫夋嫨

• webView瀹瑰櫒

鈼?nbsp;  椤圭洰鍦板潃

https://github.com/yukilzw/dy_flutter

3.Flutter璞嗙摚瀹㈡埛绔?/span>

鈼?nbsp;  搴旂敤鎴?span class="mq-146">鍥?/span>

鈼?nbsp;  鍔熻兘浠嬬粛

棣栭〉 pages/home

homo_app_bar.dart 棣栭〉瀵艰埅澶?br>home_page.dart 棣栭〉
my_home_tab_bar.dart 棣栭〉tab

涔﹀奖闊?pages/movie

book_audio_video_page.dart 涔﹀奖闊抽〉闈?br>detail_page.dart 褰辩墖銆佺數瑙嗚鎯呴〉闈?br>person_detail_page.dart 婕斿憳椤甸潰浠嬬粛

灏忕粍 pages/group

甯傞泦 shop_page.dart

甯傞泦鐨勬暟鎹娇鐢ㄤ袱涓獁ebview

鎴戠殑 page/person

鈼?nbsp;  椤圭洰鍦板潃

https://github.com/kaina404/FlutterDouBan

4.Flutter寮€婧愪腑鍥藉鎴风

鍩轰簬Google Flutter鐨勫紑婧愪腑鍥藉鎴风锛屾敮鎸丄ndroid鍜宨OS銆?/span>

鈼?nbsp;   搴旂敤鎴浘

ios

image

image

android

image

image

鈼?nbsp; 鍔熻兘

• 鐧诲綍锛堜娇鐢╫sc璐﹀彿锛?/span>

• 鏌ョ湅璧勮锛堟湭鐧诲綍鍗冲彲鏌ョ湅锛?/span>

• 鏌ョ湅銆佸洖澶嶃€佸彂琛ㄣ€佽瘎璁哄姩寮癸紙闇€瑕佺櫥褰曪級

• 鍔ㄥ脊灏忛粦灞嬶紙闇€瑕佺櫥褰曪級

• 鈥滃彂鐜扳€濋儴鍒嗙殑鍔熻兘鍩烘湰涓婇兘鏄敤H5瀹炵幇

鈼?nbsp; 椤圭洰鍦板潃

https://github.com/yubo725/flutter-osc

5锛屽捀楸兼妧鏈В鏋愪笌瀹炴垬

闂查奔鏄浗鍐呮渶鏃╂帴瑙︿娇鐢?Flutter 鐨勫洟闃燂紝缁忚繃澶氭鐮旇楠岃瘉骞跺ぇ瑙勬ā涓婄嚎锛屽湪App鎬ц兘銆佺ǔ瀹氭€с€佸紑鍙戞晥鐜囦笂鏀剁泭鐢氬銆?/span>

鍘诲勾锛岄棽楸煎彂甯冧簡銆奆lutter in action銆?/strong>鐢靛瓙涔︼紝绯荤粺鍦版€荤粨浜嗛棽楸煎湪Flutter寮€鍙戝疄璺佃繃绋嬩腑鐨勪竴鎵嬪疄璺电煡璇嗗拰鎶€鏈矇娣€銆?/span>

鐜板湪銆奆lutter in action銆嬪叏闈㈠崌绾э紝绾冲叆鏇村鍒涙柊鎬濊€冨苟閲嶆柊鏁寸悊鍏ㄤ功閫昏緫鈥斺€斻€奆lutter 鎶€鏈В鏋愪笌瀹炴垬銆嬫寮忓彂甯冿紒

杩欐湰涔﹀苟闈炲熀纭€鐭ヨ瘑鐨勭畝鍗曠綏鍒楋紝鑰屾槸浠庝竴绾块棶棰樺嚭鍙戯紝寰簭娓愯繘锛屽〒濞撻亾鏉ャ€?/span>

瀹冧粠閫氱敤涓氬姟宸ョ▼鍖栧紑濮嬶紝杩涜€屽睍寮€Flutter鍦ㄩ棽楸兼暣浣撲簯绔竴浣撳寲鏋舵瀯鐨勫垱鏂版€濊€冦€?/span>

鐩墠鏈功鐨勭數瀛愮増寮€鏀句笅杞?30M宸﹀彸 锛岃寮€鍚痺ifi鐜)锛?span class="mq-263">鎴戝凡缁忓府澶у涓嬭浇濂戒簡銆傚彲浠ユ寜鐓т竴涓嬫楠よ幏鍙?/span>

1锛岄暱鎸変簩缁寸爜锛屽叧娉?nbsp; Github涓枃绀惧尯

2锛屽洖澶嶏細Flutter鎶€鏈?/strong>  (寤鸿澶嶅埗)

---

OK锛?/span> 鍒拌繖灏辨槸杩欐湡鍒嗕韩

濡傛灉瑙夊緱鏂囩珷鏈夌敤锛岃鐐瑰湪鐪嬶紝鍒嗕韩銆?/span>

鐐逛釜鍦ㄧ湅鍛楋紒