2023-06-28 23:29:10 +00:00
<!doctype html> < html lang = en > < head > < meta charset = utf-8 > < meta name = description content = "概要 flutterはマルチプラットフォーム GUIアプリケーション フレームワーク iOS/Android， ， ， （ ） ， （ ） ， > < meta property = "og:title" content = "flutter" > < meta property = "og:description" content = "概要 flutterはマルチプラットフォーム GUIアプリケーション フレームワーク iOS/Android， ， ， （ ） ， （ ） ， > < 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 ） される パフォーマンス悪そうに見えるけれど ， ウィジェットツリーの変更
2023-06-18 06:50:45 +00:00
< script src = https://ar.falsy.cat/js/util.00639692264b21bc3ee219733d38a8be.min.js > < / script >
2023-03-18 06:36:20 +00:00
< 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 >
2023-06-18 06:50:45 +00:00
< 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 >
2023-06-18 08:25:57 +00:00
< script defer src = https://ar.falsy.cat/js/popover.0094f98610bd792200f053b9a02426a4.min.js > < / script >
2023-03-18 06:36:20 +00:00
< 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 >
2023-08-14 10:30:42 +00:00
< 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.c24a5742b7be2d0324b4d0d383e2330a.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 >
2023-03-18 06:36:20 +00:00
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
2023-06-28 23:29:10 +00:00
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， ， ， < / 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で， < / 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
2023-03-18 06:36:20 +00:00
< / span > < span class = lnt > 2
< / span > < span class = lnt > 3
< / span > < span class = lnt > 4
2023-06-28 23:29:10 +00:00
< / 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 > => < / 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 > " hello" < / 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 > Jun 21, 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 >
