상단 Bar달아 보기 (AppBar)

1. 파일 구조

파일 구조는 위와 같이 해놓았다

main.dart가 있고 pages안에 ***Page.dart로 해놓았다

 

2. 처음 코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practicePage.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

 

practicePage.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Main Page"),
      ),
    );
  }
}

 

3. 처음 에뮬레이터

Center를 이용하여 중간에 글자를 보이도록 해놓았다

이제부터 앱바를 넣어 보도록 한다

 

4. main.dart 수정 (Appbar title)

appBar: AppBar(
	title: Text("Appbar"),
),

위의 코드를 넣어 보았더니, 아래와 같이 나온다

 

5. leading, actions 사용

leading: Icon(Icons.car_crash),
actions: [
  Icon(Icons.search),
],

위를 코드를 넣어보았더니 아래와 같이 나왔다

leading: AppBar의 맨 왼쪽

actions: AppBar의 맨 오른쪽

이라는 것을 알 수 있다.

 

6. AppBar의 그림자 설정 (elevation)

elevation: 100.0,

위를 코드를 넣어보면 그림자가 생긴다

빨간 부분이 그림자임

 

 

7. AppBar의 배경색 설정

backgroundColor: Colors.black,

위의 코드를 넣어 주면 배경색이 설정된다.

결과입니다

 

이렇게 AppBar를 사용하는 법을 알아보았다.