Scaffold を AppBar 使用 して UI を構築する Flutter

では、 とウィジェット Flutter を使用して、シンプルかつ強力なユーザー インターフェイスを構築できます 。 は、アプリ バー、アプリ本体、ナビゲーション ボタンなどの共通要素を含むアプリの基本構造を提供します。 の一部であり 、アプリのタイトルとナビゲーション オプションが含まれています。 Scaffold AppBar Scaffold AppBar Scaffold

Scaffold 以下は、と を 使用して単純なユーザー インターフェイスを構築する方法に関するガイドです AppBar。

新しい Flutter アプリを作成する

Flutter まず、次のコマンドを実行して 新しいアプリを作成します terminal。

flutter create app_name

(app_name アプリの希望の名前に置き換えます)。

main.dart ファイルを編集する

main.dart ファイル(lib フォルダー内) で、内容を次のものに置き換えます。

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(MyApp());  
}  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MyHomePage(),  
   );  
  }  
}  
  
class MyHomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Flutter App with Scaffold and AppBar'),  
     ),  
      body: Center(  
        child: Text('Hello, world!'),  
     ),  
   );  
  }  
}  

上の例では、 Scaffold とを使用してアプリを作成します AppBar。 には、プロパティに渡される とユーザー インターフェイス本体が 含ま Scaffold れます 。 AppBar body

アプリを実行する

最後に、アプリを実行するには、次のコマンドを実行します terminal。

flutter run

アプリでは、アプリバーに「 と Flutter アプリ」 というタイトルの画面が表示され、  画面の中央にテキストが表示されます。 Scaffold AppBar Hello, world!

結論: Scaffold と は、 シンプルで機能的なユーザー インターフェイスの構築に役立つ AppBar 2 つの重要なウィジェットです。 Flutter これらを使用すると、アプリ バーやアプリ本体などの基本的な UI コンポーネントを備えた魅力的なアプリを作成できます。