診断ブログ

Excel, ChatGPT, Stable Diffusion, Visual Studioなど

オンラインでFlutterのUIを作るには? ~Flutter Studioの使いかた~

Flutterは、マルチプラットフォーム対応。

 

インタフェースもCSSライクで作りやすい反面、いちいち手作業で書くのは不便。

 

そこで便利なのがオンラインで使えるFlutter Studioです。

 

 

Flutter Studioの利用

デザインツールがあるので、そちらでデザインを練るのもあり。

 

Flutter Studioはこちら。

AppBuilder 2 20180529-19:35

 

 

使いかた

右のパーツをドラッグすると、パーツを追加できます。

 

選択状態のものはDelキーで消せます。

 

複数のアイテムをおくには、Rows,Colsのようなコンテナを先に置きます。

 

その上にアイコンやボタンをドラッグして、並ぶように配置できます。

 

下のバーを設置することもできます。

Material>ButtonNavigationBar,ButtonNavigationBarItemをドラッグすればOK.

 

 

コード

source codeで、書き方がわかります。

 

このブログは、ネットや書籍上の情報、個人の体験や感想を中心にまとめたものです。 正確性を期していはいますが、間違い・誤訳等あるかもしれません。 当サイトの情報によって生じたいかなる損失について一切の責任を負わないものとします. あらかじめご了承ください。

プライバシーポリシー |〇利用規約 |〇問い合わせ