Scaffold 를 AppBar 사용 하여 UI 빌드 Flutter

에서는 및 위젯을 Flutter 사용하여 간단하면서도 강력한 사용자 인터페이스를 구축할 수 있습니다. 앱 바, 앱 본문 및 탐색 버튼과 같은 공통 요소가 있는 앱의 기본 구조를 제공합니다. 의 일부이며 앱 제목 및 탐색 옵션을 포함합니다. Scaffold AppBar Scaffold AppBar Scaffold

Scaffold 다음은 and 를 사용하여 간단한 사용자 인터페이스를 구축하는 방법에 대한 가이드입니다 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 두 가지 필수 위젯입니다. Flutter 이를 활용하면 앱 바, 앱 바디와 같은 기본 UI 구성 요소로 매력적인 앱을 만들 수 있습니다.