[{"data":1,"prerenderedAt":597},["ShallowReactive",2],{"news-item-\u002Fja\u002Fnews\u002Fflutter2":3},{"id":4,"title":5,"body":6,"category":582,"created by":585,"date":586,"description":587,"extension":588,"meta":589,"navigation":590,"path":591,"sections":592,"seo":593,"stem":594,"thumbnail":595,"__hash__":596},"content_ja\u002Fja\u002Fnews\u002Fflutter2.md","Flutter 2紹介",{"type":7,"value":8,"toc":570},"minimark",[9,21,66,80,83,88,91,99,110,113,119,125,131,134,140,143,149,152,158,162,173,179,186,192,196,206,214,217,221,226,232,239,244,251,255,264,268,271,275,278,284,289,294,311,318,324,333,337,340,348,354,361,367,374,380,383,389,392,399,403,406,410,414,420,427,431,475,479,493,498,518,521,524,527,530],[10,11,12,20],"p",{},[13,14,19],"a",{"href":15,"rel":16,"title":18},"https:\u002F\u002Fdevelopers.googleblog.com\u002F2021\u002F03\u002Fannouncing-flutter-2.html",[17],"nofollow","Flutter2","Flutter 2","は2021年3月4日に本格的に公開されました。今回追加された新しい機能を以下に示します。",[22,23,24,28,36,50,63],"ul",{},[25,26,27],"li",{},"ベータ版に入っているWeb、デスクトップアプリケーションのサポートは今回の安定版で本格的になります。これで、正式にWeb、MacOS、WindowsOSでアプリケーションを実行することができます。",[25,29,30,35],{},[13,31,34],{"href":32,"rel":33},"https:\u002F\u002Fproxify.io\u002Farticles\u002Fflutter-2-null-safety",[17],"Sound Null Safety","機能。全てのライブラリーはこの機能を導入しているわけではないため、現行プロジェクトのFlutterのバージョンを上げる前に考慮してください。",[25,37,38,43,44,49],{},[13,39,42],{"href":40,"rel":41},"https:\u002F\u002Fapi.flutter.dev\u002Fflutter\u002Fmaterial\u002FAutocomplete-class.html",[17],"Autocomplete","と",[13,45,48],{"href":46,"rel":47},"https:\u002F\u002Fapi.flutter.dev\u002Fflutter\u002Fmaterial\u002FScaffoldMessenger-class.html",[17],"ScaffoldMessenger","の新しいウィジェット。",[25,51,52,43,57,62],{},[13,53,56],{"href":54,"rel":55},"https:\u002F\u002Fflutter.dev\u002Fdocs\u002Fdevelopment\u002Ftools\u002Fvs-code",[17],"Visual Studio Code",[13,58,61],{"href":59,"rel":60},"https:\u002F\u002Fflutter.dev\u002Fdocs\u002Fdevelopment\u002Ftools\u002Fandroid-studio",[17],"Android Studio","のコードエディタ拡張の更新。",[25,64,65],{},"Ecosystem、DevToolの更新、Flutter Fix追加および不具合解消。",[10,67,68,69,73,74,79],{},"Flutter 2に関しては",[13,70,72],{"href":15,"rel":71},[17],"Announcing Flutter 2","を参照してください。確認し試してみたいと思ったら、",[13,75,78],{"href":76,"rel":77},"https:\u002F\u002Fflutter.dev\u002Fdocs\u002Fget-started\u002Finstall",[17],"こちら","からダウンロードしてインストールしてください。",[10,81,82],{},"以下に、Flutter 2を使ったプロジェクト構成およびマルチプラットフォーム（iOS、Web、Mac）での実行の方法についてお話しします。読み続けましょう！",[84,85,87],"h2",{"id":86},"flutter-2の構成","Flutter 2の構成",[10,89,90],{},"現行プロジェクトがFlutter 1を使っているが、Flutter 2へバージョンアップしたくない場合、以下のようにFlutterのパスを予め構成しなければなりません。それ以外の場合、この手順を飛ばしてください。",[10,92,93,94,98],{},"ダウンロードしたFlutter 2フォルダーを解凍してから、",[95,96,97],"strong",{},"ターミナル","アプリケーションを開いて以下のコマンドを入力します。",[100,101,106],"pre",{"className":102,"code":104,"language":105},[103],"language-text","nano ~\u002F.bash_profile\n","text",[107,108,104],"code",{"__ignoreMap":109},"",[10,111,112],{},"Flutterフォルダーへのパスの別名を_.bash_profile_ファイルに追加しておきます。",[100,114,117],{"className":115,"code":116,"language":105},[103],"alias flutter2=\u002Fパス\u002Fflutter2\u002Fbin\u002Fflutter\n",[107,118,116],{"__ignoreMap":109},[10,120,121],{},[122,123,124],"em",{},".bash_profileファイルをリロードします。",[100,126,129],{"className":127,"code":128,"language":105},[103],"source ~\u002F.bash_profile\n",[107,130,128],{"__ignoreMap":109},[10,132,133],{},"ここで、_flutter2_コマンドを実行したら、Flutter 2でしか機能していません。ただし、念のため実行前に、以下のコマンドでバージョンがFlutter 2であることを確認してください。",[100,135,138],{"className":136,"code":137,"language":105},[103],"flutter2 --version\n",[107,139,137],{"__ignoreMap":109},[10,141,142],{},"上記のコマンドを実行した結果は以下のようになります",[100,144,147],{"className":145,"code":146,"language":105},[103],"Flutter 2.0.1 • channel stable • https:\u002F\u002Fgithub.com\u002Fflutter\u002Fflutter.git\nFramework • revision c5a4b4029c (2 weeks ago) • 2021-03-04 09:47:48 -0800\nEngine • revision 40441def69\nTools • Dart 2.12.0\n",[107,148,146],{"__ignoreMap":109},[10,150,151],{},"必要に応じてバージョンアップを行います。",[100,153,156],{"className":154,"code":155,"language":105},[103],"flutter2 upgrade\n",[107,157,155],{"__ignoreMap":109},[84,159,161],{"id":160},"プロジェクト新規作成およびvscodeを使った構成","プロジェクト新規作成およびVSCodeを使った構成",[10,163,164,168,169,172],{},[95,165,166],{},[122,167,97],{},"アプリケーションを開いて、以下のコマンドを用いることで新たに「",[95,170,171],{},"sample_flutter2","」というプロジェクトを作成します。",[100,174,177],{"className":175,"code":176,"language":105},[103],"flutter2 create sample_flutter2\n",[107,178,176],{"__ignoreMap":109},[10,180,181,182,185],{},"VSCode（Visual Studio Code）でこのプロジェクトを開いて、",[122,183,184],{},"settings.json_ファイルを",".vs_code\u002F_フォルダーに作成して以下のコードをそこにコピー＆ペーストすることによって Flutterフォルダーへのパスを作成します。",[100,187,190],{"className":188,"code":189,"language":105},[103],"{\n\"dart.flutterSdkPath\": \"パス\u002Fflutter2\"\n}\n",[107,191,189],{"__ignoreMap":109},[84,193,195],{"id":194},"osでの実行","OSでの実行",[10,197,198,201,202,205],{},[95,199,200],{},"VSCode","にてiPhoneを実行端末として選択します。ここで ",[95,203,204],{},"iPhone12 Pro Max","のシミュレーターを選択します。",[207,208],"img",{"className":209,"alt":109,"src":212,"style":213},[210,211],"block","mx-auto","https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F03\u002F29104853\u002Fselect_iphone.png","width: 50%;",[10,215,216],{},"実行します。かなり簡単ですよね。",[207,218],{"className":219,"alt":109,"src":220,"style":213},[210,211],"https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F03\u002F29104929\u002Frun_in_iphone.png",[222,223,225],"h4",{"id":224},"ipaへのビルド",".ipaへのビルド",[100,227,230],{"className":228,"code":229,"language":105},[103],"flutter2 build ipa --profile\n",[107,231,229],{"__ignoreMap":109},[10,233,234,235,238],{},"上記のコマンドでは",[95,236,237],{},"Runner.xcarchive","がbuild\u002Fios\u002Farchiveフォルダーに生成されるので、そこへ辿ってそのファイルをクリックすると、Xcodeが自動的に開いて、普通なiOSアプリケーションのように.ipaファイルをビルドすることができます。",[207,240],{"className":241,"alt":109,"src":242,"style":243},[210,211],"https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F03\u002F29131227\u002FScreen-Shot-2021-03-29-at-13.12.14-1024x199.png","width: 100%;",[10,245,246,247,250],{},"なお、 ",[122,248,249],{},"--profile_フラグの他に、リリースモードに使われる","--release_フラグを選択できます。Flutterには、デバッグ、プロフィール、リリースreleaseという三つのビルドモードがあります。",[84,252,254],{"id":253},"webでの実行","Webでの実行",[10,256,257,259,260,263],{},[95,258,200],{},"にて",[95,261,262],{},"Chrome","を実行端末として選択します。",[207,265],{"className":266,"alt":109,"src":267,"style":213},[210,211],"https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F03\u002F29105750\u002Fselect_device.png",[10,269,270],{},"レイアウトや情報がiOS版のように表示されます。",[207,272],{"className":273,"alt":109,"src":274,"style":243},[210,211],"https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F03\u002F29124734\u002Fchrome_result-1024x960.png",[222,276,277],{"id":277},"htmlへのビルド",[100,279,282],{"className":280,"code":281,"language":105},[103],"flutter2 build web --web-renderer html --profile\n",[107,283,281],{"__ignoreMap":109},[10,285,286],{},[122,287,288],{},"--profile：ビルドモード（プロフィールまたはリリース）",[10,290,291],{},[122,292,293],{},"--web-renderer html：レンダリングモードであり、以下のような三つのオプションがあります。",[22,295,296,301,306],{},[25,297,298],{},[122,299,300],{},"auto：アプリケーションがモバイルのブラウザで動作する時にHTMLレンダリングモードを、PCのブラウザで動作する時にCanvasKitレンダリングモードを使います。",[25,302,303],{},[122,304,305],{},"html：常にHTMLレンダリングモードを使います。",[25,307,308],{},[122,309,310],{},"canvaskit：常にCanvasKitレンダリングモードを使います。",[10,312,313,314,317],{},"上記のコマンドでは、.html、.css、.jsの各ファイルが_\u002Fbuild\u002Fweb\u002F",[122,315,316],{},"フォルダーに生成されます。若し","\u002Fbuild\u002Fweb\u002Findex.html_を直接実行したら、以下のようなエラーが起こりえます。",[100,319,322],{"className":320,"code":321,"language":105},[103],"Access to internal resource at 'file:\u002F\u002F\u002Fmanifest.json' from origin 'null' has been blocked by CORS policy: \nCross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.\n",[107,323,321],{"__ignoreMap":109},[10,325,326,327,332],{},"上記のエラーを避けるため、",[13,328,331],{"href":329,"rel":330},"https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fweb-server-for-chrome\u002Fofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en)",[17],"Web Server for Chrome","というChromeの拡張を用いて、_.\u002Fbuild\u002Fweb\u002F_フォルダーにロカールサーバーをシミュレートしてから_index.html_を再び実行します。",[84,334,336],{"id":335},"macosでの実行","MacOSでの実行",[10,338,339],{},"前もってOSの開発モードを有効化しておく必要があります。",[22,341,342],{},[25,343,344,347],{},[95,345,346],{},"Mac","OSの場合、以下のコマンドを使います。",[100,349,352],{"className":350,"code":351,"language":105},[103],"flutter2 config --enable-macos-desktop\n",[107,353,351],{"__ignoreMap":109},[22,355,356],{},[25,357,358,347],{},[95,359,360],{},"Windows",[100,362,365],{"className":363,"code":364,"language":105},[103],"flutter2 config --enable-windows-desktop\n",[107,366,364],{"__ignoreMap":109},[22,368,369],{},[25,370,371,347],{},[95,372,373],{},"Linux",[100,375,378],{"className":376,"code":377,"language":105},[103],"flutter2 config --enable-linux-desktop\n",[107,379,377],{"__ignoreMap":109},[10,381,382],{},"そして、以下のコマンドでデスクトップサポートを既存プロジェクトに追加します。",[100,384,387],{"className":385,"code":386,"language":105},[103],"flutter2 create --platforms=windows,macos,linux .\n",[107,388,386],{"__ignoreMap":109},[10,390,391],{},"プラットフォーム（windows、macos、linux）は任意に選択できます。",[10,393,394,259,396,263],{},[95,395,200],{},[95,397,398],{},"macOS",[207,400],{"className":401,"alt":109,"src":402,"style":213},[210,211],"https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F03\u002F29140531\u002Fselect_desktop.png",[10,404,405],{},"実行します。",[207,407],{"className":408,"alt":109,"src":409,"style":243},[210,211],"https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F03\u002F29140649\u002Fdesktop_version-1024x738.png",[222,411,413],{"id":412},"appへのビルド",".appへのビルド",[100,415,418],{"className":416,"code":417,"language":105},[103],"flutter2 build macos --profile\n",[107,419,417],{"__ignoreMap":109},[10,421,422,423,426],{},"上記のコマンドでは、",[122,424,425],{},"sample_flutter2.app_ファイルが","\u002Fbuild\u002Fmacos\u002FBuild\u002FProducts\u002FProfile_フォルダーに、プロフィールモードで生成されます。必要に応じて_--release_フラグをも選択できます。",[84,428,430],{"id":429},"flutterのメリット","Flutterのメリット",[22,432,433,436,439,448,454,457,460],{},[25,434,435],{},"Flutterの一番の特徴としてはマルチプラットフォームのサポートであり、スタートアップ企業に不可欠な選択だと言われています。iOSとAndroidのプラットフォームのいずれかで開発したソースコードを流用してWeb版を製作することができます。これで、新規開発より工数が削減できます。",[25,437,438],{},"アプリケーションのUIと処理ロジックはどのプラットフォームにも変わりません。",[25,440,441,442,447],{},"Flutterは今急速に成長しており、",[13,443,446],{"href":444,"rel":445},"https:\u002F\u002Fpub.dev\u002F",[17],"pub.dev"," にある第三者のライブラリーをサポートしてくれます。",[25,449,450,453],{},[95,451,452],{},"Hot reload","機能はVSCodeとAndroid Studioにて非常に使いやすいし、Swift、Kotlinといった他の言語に比べ、デバッグに費やす工数が節約できます。これで開発工数も削減できます。",[25,455,456],{},"Flutterは多くのカスタマイズ可能なウィジェットを提供してくれ、レイアウトの実装工数も削減できます。",[25,458,459],{},"Dartは習得しやすいプログラミング言語であり、プログラミング知識の浅い初心者でもプロトタイプ版やアプリケーションを開発できます。",[25,461,462,463,468,469,474],{},"Flutterのドキュメントは高く評価されており、それらには簡単に理解しやすい",[13,464,467],{"href":465,"rel":466},"https:\u002F\u002Fwww.youtube.com\u002Fplaylist?list=PLOU2XLYxmsIL0pH0zWe_ZOHgGhZ7UasUE",[17],"UIチュートリアル"," から",[13,470,473],{"href":471,"rel":472},"https:\u002F\u002Fflutter.dev\u002Fdocs\u002Fdevelopment\u002Fui\u002Flayout\u002Fconstraints",[17],"詳細説明書","に至るまで揃っています。",[84,476,478],{"id":477},"flutterのデメリット","Flutterのデメリット",[22,480,481,484,487,490],{},[25,482,483],{},"Dartは何といってもKotlin、Swift比で、流行っている言語という訳ではありません。ですので、Flutter利用のため、Dart言語や、BLOC、Widgetsといった新しいコンセプトを習得しなければなりません。",[25,485,486],{},"特にAndroidOSをはじめとしてあるプラットフォーム、OSバージョン、端末機種が原因で起こる問題や不具合を解決するためにSwift、Kotlinのネイティブ言語の基本知識も必要です。",[25,488,489],{},"第三者のライブラリーのすべては使用したいプラットフォームをサポートしてくれる訳ではありません。殆ど、 iOSとAndroidのいずれもサポートしてくれますが、いずれかのものしかサポートしていない場合があります。",[25,491,492],{},"開発途中でレイアウトエラーや子クラスに起こるエラーが原因で以下のような赤いエラー画面が出ると困惑します。",[207,494],{"className":495,"alt":109,"src":496,"style":497},[210,211],"https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F03\u002F29142020\u002Ferror.png","width: 20%;",[22,499,500,509],{},[25,501,502,503,508],{},"アニメーション効果に関わる問題(",[13,504,507],{"href":505,"rel":506},"https:\u002F\u002Fgithub.com\u002Fflutter\u002Fflutter\u002Fissues\u002F61450",[17],"例",")があるようなので、複雑なアニメーション効果を使ったアプリケーション開発にあたり考慮しなければなりません。",[25,510,511,512,517],{},"Flutterは基本的にモバイルアプリケーション開発向けのフレームワークのようなので、Webプラットフォームやデスクトッププラットフォームによって、UIとUXが多少異なります。そのため、各プラットフォームのUI、UX、処理ロジックは同一ソースコードで共存することができません。しかし、その対応策としては、単一または複数のパッケージのためのウィジェットや処理ロジックを共通化した後、プラットフォーム毎に別々のプログラムを作成して、それらのパッケージを第三者のライブラリーのように使いさえすればいいです。 これは一番良い対応策ではありませんが、少なくとも各プラットフォームの共通化ができます。(",[13,513,516],{"href":514,"rel":515},"https:\u002F\u002Fflutter.dev\u002Fdocs\u002Fdevelopment\u002Fpackages-and-plugins\u002Fdeveloping-packages",[17],"パッケージ作成について",")",[84,519,520],{"id":520},"まとめ",[10,522,523],{},"Flutterはデメリットを除き、営業や開発チームにとって多くの利点があります。特にiOSとAndroidの両方に対応したモバイルアプリケーションをはじめとして、お客様のあらゆる要望に応える見た目が良いかつ高効率なアプリケーションを開発することに際して外せない選択肢になります。",[10,525,526],{},"Flutter 2は正式に公開されました。是非体験しましょう。そのことを後悔することは無いはずです。",[84,528,529],{"id":529},"参考元",[22,531,532,537,542,548,554,560,565],{},[25,533,534],{},[13,535,32],{"href":32,"rel":536},[17],[25,538,539],{},[13,540,15],{"href":15,"rel":541},[17],[25,543,544],{},[13,545,546],{"href":546,"rel":547},"https:\u002F\u002Fmedium.com\u002Fcoding-with-flutter\u002Fwhats-great-about-flutter-c1b4e44c69ac",[17],[25,549,550],{},[13,551,552],{"href":552,"rel":553},"https:\u002F\u002Fwww.thedroidsonroids.com\u002Fblog\u002Fflutter-in-mobile-app-development-pros-and-cons-for-app-owners",[17],[25,555,556],{},[13,557,558],{"href":558,"rel":559},"https:\u002F\u002Fflutter.dev",[17],[25,561,562],{},[13,563,444],{"href":444,"rel":564},[17],[25,566,567],{},[13,568,465],{"href":465,"rel":569},[17],{"title":109,"searchDepth":571,"depth":571,"links":572},2,[573,574,575,576,577,578,579,580,581],{"id":86,"depth":571,"text":87},{"id":160,"depth":571,"text":161},{"id":194,"depth":571,"text":195},{"id":253,"depth":571,"text":254},{"id":335,"depth":571,"text":336},{"id":429,"depth":571,"text":430},{"id":477,"depth":571,"text":478},{"id":520,"depth":571,"text":520},{"id":529,"depth":571,"text":529},[583,584],"tech talk","mobile","Briswell Vietnam Co Ltd","2021-04-22","Flutter 2 は2021年3月4日に本格的に公開されました。今回追加された新しい機能を以下に示します。ベータ版に入っているWeb、デスクトップアプリケーションのサポートは今回の安定版で本格的になります。これで、正式にWeb、MacOS、WindowsOSでアプリケーションを実行することができます。","md",{},true,"\u002Fja\u002Fnews\u002Fflutter2",null,{"title":5,"description":587},"ja\u002Fnews\u002Fflutter2","https:\u002F\u002Fs3-ap-southeast-1.amazonaws.com\u002Fhomepage-media\u002Fwp-content\u002Fuploads\u002F2021\u002F04\u002F06103446\u002Fflutter2.png","qXdJCp9MPIDOeF892YyJJiEj8nnlXXzR6EzdXpFyMPE",1782205040339]