falsycat/ar.falsy.cat
1
0
Fork 0
mirror of https://github.com/falsycat/ar.falsy.cat.git synced 2024-11-17 08:44:51 +00:00
Code Issues Projects Releases Wiki Activity
bb831c97a7
ar.falsy.cat/note/info-tech/flutter/index.html
falsycat bb831c97a7 deploy: 679f2e3655
2023-08-14 12:24:07 +00:00

38 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html lang=en><head><meta charset=utf-8><meta name=description content="概要 flutterはマルチプラットフォーム GUIアプリケーション フレームワーク iOS/Android，Web，Windows/Linux/Mac，組み込み Google製 使用言語は Dart 環境構築 dart + flutterをインストール VSCodeにflutter用の拡張機能を追加 豆知識 ウィジェットツリー main関数からrunAppにウィジェットツリーを渡すことでメインループが始まる ウィジェットはStatelessなものとStatefullなものに大別できる Statefullなウィジェットが更新（setState）されると，そのウィジェットとその子孫のツリーが全て再構成（build）される パフォーマンス悪そうに見えるけれど，ウィジェットツリーの変更部分のみをシステム内部のエレメントツリーに反映することで画面更新を行なっているので，最適化はされている HTMLレンダラみたいな感じ 画面遷移 Navigatorが現在の画面の状態スタックを持つ pushで画面遷移 コルーチンのawaitで，遷移先がpopされた時の値を受け取れる popで前の画面に戻る ユーザーからの戻るボタン押下でも勝手にpopされ得る 呼び出し元へ返す値を引数に設定できる 1 2 3 4 5 6 7 8 9 // push (遷移後の画面がpopされるまでyield) final ret = await Navigator."><meta property="og:title" content="flutter"><meta property="og:description" content="概要 flutterはマルチプラットフォーム GUIアプリケーション フレームワーク iOS/Android，Web，Windows/Linux/Mac，組み込み Google製 使用言語は Dart 環境構築 dart + flutterをインストール VSCodeにflutter用の拡張機能を追加 豆知識 ウィジェットツリー main関数からrunAppにウィジェットツリーを渡すことでメインループが始まる ウィジェットはStatelessなものとStatefullなものに大別できる Statefullなウィジェットが更新（setState）されると，そのウィジェットとその子孫のツリーが全て再構成（build）される パフォーマンス悪そうに見えるけれど，ウィジェットツリーの変更部分のみをシステム内部のエレメントツリーに反映することで画面更新を行なっているので，最適化はされている HTMLレンダラみたいな感じ 画面遷移 Navigatorが現在の画面の状態スタックを持つ pushで画面遷移 コルーチンのawaitで，遷移先がpopされた時の値を受け取れる popで前の画面に戻る ユーザーからの戻るボタン押下でも勝手にpopされ得る 呼び出し元へ返す値を引数に設定できる 1 2 3 4 5 6 7 8 9 // push (遷移後の画面がpopされるまでyield) final ret = await Navigator."><meta property="og:type" content="website"><meta property="og:image" content="https://ar.falsy.cat/icon.png"><meta property="og:url" content="https://ar.falsy.cat/note/info-tech/flutter/"><meta property="og:width" content="200"><meta property="og:height" content="200"><meta name=twitter:card content="summary"><meta name=twitter:title content="flutter"><meta name=twitter:description content="概要 flutterはマルチプラットフォーム GUIアプリケーション フレームワーク iOS/Android，Web，Windows/Linux/Mac，組み込み Google製 使用言語は Dart 環境構築 dart + flutterをインストール VSCodeにflutter用の拡張機能を追加 豆知識 ウィジェットツリー main関数からrunAppにウィジェットツリーを渡すことでメインループが始まる ウィジェットはStatelessなものとStatefullなものに大別できる Statefullなウィジェットが更新（setState）されると，そのウィジェットとその子孫のツリーが全て再構成（build）される パフォーマンス悪そうに見えるけれど，ウィジェットツリーの変更部分のみをシステム内部のエレメントツリーに反映することで画面更新を行なっているので，最適化はされている HTMLレンダラみたいな感じ 画面遷移 Navigatorが現在の画面の状態スタックを持つ pushで画面遷移 コルーチンのawaitで，遷移先がpopされた時の値を受け取れる popで前の画面に戻る ユーザーからの戻るボタン押下でも勝手にpopされ得る 呼び出し元へ返す値を引数に設定できる 1 2 3 4 5 6 7 8 9 // push (遷移後の画面がpopされるまでyield) final ret = await Navigator."><meta name=twitter:image content="https://ar.falsy.cat/icon.png"><title>flutter</title><meta name=viewport content="width=device-width,initial-scale=1"><link rel="shortcut icon" type=image/png href=https://ar.falsy.cat//icon.png><link href=https://ar.falsy.cat/styles.80333fa2099c0bee674efa435fde378c.min.css rel=stylesheet><link href=https://ar.falsy.cat/styles/_light_syntax.86a48a52faebeaaf42158b72922b1c90.min.css rel=stylesheet id=theme-link><script src=https://ar.falsy.cat/js/darkmode.557cde7fcc3511a3d7ca8545ecd46d77.min.js></script>
<script src=https://ar.falsy.cat/js/util.00639692264b21bc3ee219733d38a8be.min.js></script>
<link rel=preload href=https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css as=style onload='this.onload=null,this.rel="stylesheet"' integrity=sha384-R4558gYOUz8mP9YWpZJjofhk+zx0AS11p36HnD2ZKj/6JR5z27gSSULCNHIRReVs crossorigin=anonymous><script defer src=https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js integrity=sha384-z1fJDqw8ZApjGO3/unPWUPsIymfsJmyrDVWC8Tv/a1HeOtGmkwNd/7xUS0Xcnvsx crossorigin=anonymous></script>
<script defer src=https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js integrity=sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR crossorigin=anonymous></script>
<script defer src=https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/contrib/copy-tex.min.js integrity=sha384-ww/583aHhxWkz5DEVn6OKtNiIaLi2iBRNZXfJRiY1Ai7tnJ9UXpEsyvOITVpTl4A crossorigin=anonymous></script>
<script src=https://cdn.jsdelivr.net/npm/@floating-ui/core@1.2.1></script>
<script src=https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.2.1></script>
<script defer src=https://ar.falsy.cat/js/popover.0094f98610bd792200f053b9a02426a4.min.js></script>
<script defer src=https://ar.falsy.cat/js/code-title.ce4a43f09239a9efb48fee342e8ef2df.min.js></script>
<script defer src=https://ar.falsy.cat/js/clipboard.2913da76d3cb21c5deaa4bae7da38c9f.min.js></script>
<script defer src=https://ar.falsy.cat/js/callouts.7723cac461d613d118ee8bb8216b9838.min.js></script>
<script>const SEARCH_ENABLED=!1,LATEX_ENABLED=!0,PRODUCTION=!0,BASE_URL="https://ar.falsy.cat/",fetchData=Promise.all([fetch("https://ar.falsy.cat/indices/linkIndex.1536ace533d46c5e6ba5603af477ff2f.min.json").then(e=>e.json()).then(e=>({index:e.index,links:e.links})),fetch("https://ar.falsy.cat/indices/contentIndex.2f65e8b38dddb7b337aa9b63a35c81e5.min.json").then(e=>e.json())]).then(([{index:e,links:t},n])=>({index:e,links:t,content:n})),render=()=>{const e=new URL(BASE_URL),t=e.pathname,n=window.location.pathname,s=t==n;addCopyButtons(),addTitleToCodeBlocks(),addCollapsibleCallouts(),initPopover("https://ar.falsy.cat",!0);const o=document.getElementById("footer");if(o){const e=document.getElementById("graph-container");if(!e)return requestAnimationFrame(render);e.textContent="";const t=s&&!0;drawGraph("https://ar.falsy.cat",t,[{"/moc":"#4388cc"}],t?{centerForce:1,depth:-1,enableDrag:!0,enableLegend:!1,enableZoom:!0,fontSize:.5,linkDistance:1,opacityScale:3,repelForce:1,scale:1.4}:{centerForce:1,depth:1,enableDrag:!0,enableLegend:!1,enableZoom:!0,fontSize:.6,linkDistance:1,opacityScale:3,repelForce:2,scale:1.2})}var i=document.getElementsByClassName("mermaid");i.length>0&&import("https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs").then(e=>{e.default.init()});function a(n){const e=n.target,t=e.className.split(" "),s=t.includes("broken"),o=t.includes("internal-link");plausible("Link Click",{props:{href:e.href,broken:s,internal:o,graph:!1}})}const r=document.querySelectorAll("a");for(link of r)link.className.includes("root-title")&&link.addEventListener("click",a,{once:!0})},init=(e=document)=>{addCopyButtons(),addTitleToCodeBlocks(),renderMathInElement(e.body,{delimiters:[{left:"$$",right:"$$",display:!0},{left:"$",right:"$",display:!1}],macros:{'’':"'"},throwOnError:!1})}</script><script type=module>
import { attachSPARouting } from "https:\/\/ar.falsy.cat\/js\/router.d6fe6bd821db9ea97f9aeefae814d8e7.min.js"
attachSPARouting(init, render)
</script><script defer data-domain=ar.falsy.cat src=https://plausible.io/js/script.js></script>
<script>window.plausible=window.plausible||function(){(window.plausible.q=window.plausible.q||[]).push(arguments)}</script></head><body><div id=search-container><div id=search-space><input autocomplete=off id=search-bar name=search type=text aria-label=Search placeholder="Search for something..."><div id=results-container></div></div></div><script src=https://cdn.jsdelivr.net/npm/flexsearch@0.7.21/dist/flexsearch.bundle.js integrity="sha256-i3A0NZGkhsKjVMzFxv3ksk0DZh3aXqu0l49Bbh0MdjE=" crossorigin=anonymous defer></script>
<script defer src=https://ar.falsy.cat/js/full-text-search.e6e2e0c213187ca0c703d6e2c7a77fcd.min.js></script><div class=singlePage><header><h1 id=page-title><a class=root-title href=https://ar.falsy.cat/>ar.falsy.cat</a></h1><div class=spacer></div><div id=search-icon><p>Search</p><svg tabindex="0" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg></div><div class=darkmode><input class=toggle id=darkmode-toggle type=checkbox tabindex=-1>
<label id=toggle-label-light for=darkmode-toggle tabindex=-1><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="dayIcon" viewBox="0 0 35 35" style="enable-background:new 0 0 35 35"><title>Light Mode</title><path d="M6 17.5C6 16.672 5.328 16 4.5 16h-3C.672 16 0 16.672.0 17.5S.672 19 1.5 19h3C5.328 19 6 18.328 6 17.5zM7.5 26c-.414.0-.789.168-1.061.439l-2 2C4.168 28.711 4 29.086 4 29.5 4 30.328 4.671 31 5.5 31c.414.0.789-.168 1.06-.44l2-2C8.832 28.289 9 27.914 9 27.5 9 26.672 8.329 26 7.5 26zm10-20C18.329 6 19 5.328 19 4.5v-3C19 .672 18.329.0 17.5.0S16 .672 16 1.5v3C16 5.328 16.671 6 17.5 6zm10 3c.414.0.789-.168 1.06-.439l2-2C30.832 6.289 31 5.914 31 5.5 31 4.672 30.329 4 29.5 4c-.414.0-.789.168-1.061.44l-2 2C26.168 6.711 26 7.086 26 7.5 26 8.328 26.671 9 27.5 9zM6.439 8.561C6.711 8.832 7.086 9 7.5 9 8.328 9 9 8.328 9 7.5c0-.414-.168-.789-.439-1.061l-2-2C6.289 4.168 5.914 4 5.5 4 4.672 4 4 4.672 4 5.5c0 .414.168.789.439 1.06l2 2.001zM33.5 16h-3c-.828.0-1.5.672-1.5 1.5s.672 1.5 1.5 1.5h3c.828.0 1.5-.672 1.5-1.5S34.328 16 33.5 16zM28.561 26.439C28.289 26.168 27.914 26 27.5 26c-.828.0-1.5.672-1.5 1.5.0.414.168.789.439 1.06l2 2C28.711 30.832 29.086 31 29.5 31c.828.0 1.5-.672 1.5-1.5.0-.414-.168-.789-.439-1.061l-2-2zM17.5 29c-.829.0-1.5.672-1.5 1.5v3c0 .828.671 1.5 1.5 1.5s1.5-.672 1.5-1.5v-3C19 29.672 18.329 29 17.5 29zm0-22C11.71 7 7 11.71 7 17.5S11.71 28 17.5 28 28 23.29 28 17.5 23.29 7 17.5 7zm0 18c-4.136.0-7.5-3.364-7.5-7.5s3.364-7.5 7.5-7.5 7.5 3.364 7.5 7.5S21.636 25 17.5 25z"/></svg></label><label id=toggle-label-dark for=darkmode-toggle tabindex=-1><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="nightIcon" viewBox="0 0 100 100" style="enable-background='new 0 0 100 100'"><title>Dark Mode</title><path d="M96.76 66.458c-.853-.852-2.15-1.064-3.23-.534-6.063 2.991-12.858 4.571-19.655 4.571C62.022 70.495 50.88 65.88 42.5 57.5 29.043 44.043 25.658 23.536 34.076 6.47c.532-1.08.318-2.379-.534-3.23-.851-.852-2.15-1.064-3.23-.534-4.918 2.427-9.375 5.619-13.246 9.491-9.447 9.447-14.65 22.008-14.65 35.369.0 13.36 5.203 25.921 14.65 35.368s22.008 14.65 35.368 14.65c13.361.0 25.921-5.203 35.369-14.65 3.872-3.871 7.064-8.328 9.491-13.246C97.826 68.608 97.611 67.309 96.76 66.458z"/></svg></label></div></header><article><h1>flutter</h1><p class=meta>Last updated
Jun 29, 2023</p><ul class=tags><li><a href=https://ar.falsy.cat/tags/note/>Note</a></li><li><a href=https://ar.falsy.cat/tags/info-tech/>Info tech</a></li><li><a href=https://ar.falsy.cat/tags/development/>Development</a></li><li><a href=https://ar.falsy.cat/tags/library/>Library</a></li></ul><aside class=mainTOC><details><summary>Table of Contents</summary><nav id=TableOfContents><ol><li><a href=#概要>概要</a></li><li><a href=#環境構築>環境構築</a></li><li><a href=#豆知識>豆知識</a><ol><li><a href=#ウィジェットツリー>ウィジェットツリー</a></li><li><a href=#画面遷移>画面遷移</a></li></ol></li></ol></nav></details></aside><a href=#概要><h2 id=概要><span class=hanchor arialabel=Anchor># </span>概要</h2></a><ul><li>flutterはマルチプラットフォーム GUIアプリケーション フレームワーク<ul><li>iOS/Android，Web，Windows/Linux/Mac，組み込み</li></ul></li><li>Google製</li><li>使用言語は
<a href=/note/info-tech/dart/ rel=noopener class=internal-link data-src=/note/info-tech/dart/>Dart</a></li></ul><a href=#環境構築><h2 id=環境構築><span class=hanchor arialabel=Anchor># </span>環境構築</h2></a><ul><li>dart + flutterをインストール</li><li>VSCodeにflutter用の拡張機能を追加</li></ul><a href=#豆知識><h2 id=豆知識><span class=hanchor arialabel=Anchor># </span>豆知識</h2></a><a href=#ウィジェットツリー><h3 id=ウィジェットツリー><span class=hanchor arialabel=Anchor># </span>ウィジェットツリー</h3></a><ul><li><code>main</code>関数から<code>runApp</code>にウィジェットツリーを渡すことでメインループが始まる</li><li>ウィジェットはStatelessなものとStatefullなものに大別できる</li><li>Statefullなウィジェットが更新（<code>setState</code>）されると，そのウィジェットとその子孫のツリーが全て再構成（<code>build</code>）される<ul><li>パフォーマンス悪そうに見えるけれど，ウィジェットツリーの変更部分のみをシステム内部のエレメントツリーに反映することで画面更新を行なっているので，最適化はされている</li><li>HTMLレンダラみたいな感じ</li></ul></li></ul><a href=#画面遷移><h3 id=画面遷移><span class=hanchor arialabel=Anchor># </span>画面遷移</h3></a><ul><li>Navigatorが現在の画面の状態スタックを持つ<ul><li>pushで画面遷移<ul><li>コルーチンのawaitで，遷移先がpopされた時の値を受け取れる</li></ul></li><li>popで前の画面に戻る<ul><li>ユーザーからの戻るボタン押下でも勝手にpopされ得る</li><li>呼び出し元へ返す値を引数に設定できる</li></ul></li></ul></li></ul><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span><span class=lnt>5
</span><span class=lnt>6
</span><span class=lnt>7
</span><span class=lnt>8
</span><span class=lnt>9
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-dart data-lang=dart><span class=line><span class=cl><span class=c1>// push (遷移後の画面がpopされるまでyield)
</span></span></span><span class=line><span class=cl><span class=c1></span><span class=kd>final</span> <span class=n>ret</span> <span class=o>=</span> <span class=kd>await</span> <span class=n>Navigator</span><span class=p>.</span><span class=n>of</span><span class=p>(</span><span class=n>context</span><span class=p>).</span><span class=n>push</span><span class=p>(</span>
</span></span><span class=line><span class=cl> <span class=n>MaterialPageRoute</span><span class=p>(</span>
</span></span><span class=line><span class=cl> <span class=nl>builder:</span> <span class=p>(</span><span class=n>context</span><span class=p>)</span> <span class=o>=&gt;</span> <span class=n>Widget</span><span class=p>(),</span>
</span></span><span class=line><span class=cl> <span class=p>),</span>
</span></span><span class=line><span class=cl><span class=p>);</span>
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl><span class=c1>// pop
</span></span></span><span class=line><span class=cl><span class=c1></span><span class=n>Navigator</span><span class=p>.</span><span class=n>of</span><span class=p>(</span><span class=n>context</span><span class=p>).</span><span class=n>pop</span><span class=p>(</span><span class=s2>&#34;hello&#34;</span><span class=p>);</span>
</span></span></code></pre></td></tr></table></div></div><div class=content-list><h2>Related Notes</h2><ul class=section-ul><li class=section-li><div class=section><p class=meta>Jun 29, 2023</p><div class=desc><h3><a href=https://ar.falsy.cat/note/info-tech/install-flutter-on-archlinux/ class=internal-link data-src=/note/info-tech/install-flutter-on-archlinux/>ArchLinuxへflutterをインストール</a></h3></div><div class=spacer></div><ul class=tags><li><a href=https://ar.falsy.cat/tags/note/>Note</a></li><li><a href=https://ar.falsy.cat/tags/info-tech/>Info-Tech</a></li><li><a href=https://ar.falsy.cat/tags/development/>Development</a></li><li><a href=https://ar.falsy.cat/tags/howto/>Howto</a></li></ul></div></li><li class=section-li><div class=section><p class=meta>Aug 14, 2023</p><div class=desc><h3><a href=https://ar.falsy.cat/note/info-tech/c-cpp-sanitizer/ class=internal-link data-src=/note/info-tech/c-cpp-sanitizer/>C/C++のsanitizerの使い方</a></h3></div><div class=spacer></div><ul class=tags><li><a href=https://ar.falsy.cat/tags/note/>Note</a></li><li><a href=https://ar.falsy.cat/tags/info-tech/>Info-Tech</a></li><li><a href=https://ar.falsy.cat/tags/development/>Development</a></li><li><a href=https://ar.falsy.cat/tags/programming-language/>Programming-Language</a></li><li><a href=https://ar.falsy.cat/tags/howto/>Howto</a></li></ul></div></li><li class=section-li><div class=section><p class=meta>Jun 21, 2023</p><div class=desc><h3><a href=https://ar.falsy.cat/note/info-tech/dart/ class=internal-link data-src=/note/info-tech/dart/>dart言語</a></h3></div><div class=spacer></div><ul class=tags><li><a href=https://ar.falsy.cat/tags/note/>Note</a></li><li><a href=https://ar.falsy.cat/tags/info-tech/>Info-Tech</a></li><li><a href=https://ar.falsy.cat/tags/development/>Development</a></li><li><a href=https://ar.falsy.cat/tags/programming-language/>Programming-Language</a></li></ul></div></li></ul></div></article><hr><div class=page-end id=footer><div class=backlinks-container><h3>Backlinks</h3><ul class=backlinks><li><a href=/note/info-tech/dart/ data-ctx=flutter data-src=/note/info-tech/dart class=internal-link>dart言語</a></li><li><a href=/note/info-tech/install-flutter-on-archlinux/ data-ctx=flutter data-src=/note/info-tech/install-flutter-on-archlinux class=internal-link>ArchLinuxへflutterをインストール</a></li></ul></div><div><script src=https://cdn.jsdelivr.net/npm/d3@6.7.0/dist/d3.min.js integrity="sha256-+7jaYCp29O1JusNWHaYtgUn6EhuP0VaFuswhNV06MyI=" crossorigin=anonymous></script><h3>Interactive Graph</h3><div id=graph-container></div><style>:root{--g-node:var(--secondary);--g-node-active:var(--primary);--g-node-inactive:var(--visited);--g-link:var(--outlinegray);--g-link-active:#5a7282}</style><script src=https://ar.falsy.cat/js/graph.6579af7b10c818dbd2ca038702db0224.js></script></div></div><div id=contact_buttons><footer><p>Made by falsycat using <a href=https://github.com/jackyzha0/quartz>Quartz</a>, © 2023</p><ul><li><a href=https://ar.falsy.cat/>Home</a></li><li><a href=https://falsy.cat/>Portfolio</a></li><li><a href=https://falsy.cat/admin>Fediverse</a></li><li><a href=https://github.com/falsycat>GitHub</a></li><li><a href=https://youtube.com/@falsycat>YouTube</a></li></ul></footer></div></div></body></html>
Reference in New Issue View Git Blame Copy Permalink