플러터(Flutter) - 스캐폴드를 이용해 제목 및 플로팅 버튼 추가하

안녕하세요 놀이방 사장입니다.

 

이번 포스팅은 플러터(Flutter)

스캐폴드를 이용해 제모고가 위젯을 여러개 만들어 보겠습니다.

 

먼저

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Material Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.cyan,
      ),
      home: MaterialFlutterApp(),
    );
  }
}

class MaterialFlutterApp extends StatefulWidget{
  @override
  State<StatefulWidget> createState(){
    return _MaterialFlutterApp();
  }
}

class _MaterialFlutterApp extends State<MaterialFlutterApp>{
  @override
  Widget build(BuildContext context){
    return null;
  }
}

 

=> StatefulWidget클래스를 상속받는 MaterialFlutterApp 클래스를 만든다.

스테이풀 위젯을 화면에 출력하기 위해서는 State클래스를 이용해야하기 때문에 _MaterialFlutterApp클래스도 상속해준다.

 

하지만 return 값이  null이기 때문에 실행이 되고 오류가 뜨고 아예 오류로 띄울거임

 

여기서 _MaterialFlutterApp 클래스에서 재정의한 build() 함수에 null 대신 위젯을 넣어 준다.

여기서 스캐폴드를 사용한다.

Scaffold()함수 호출로 위젯의 골격만 작성

이러면 오류는 사라지지만 앱에는 골격만 있기 때문에 흰색 화면만 나옴

class _MaterialFlutterApp extends State<MaterialFlutterApp>{
  @override
  Widget build(BuildContext context){
    return Scaffold(

    );
  }
}

=> 골격만 있는 상태

 

제목 줄 추가하기

이제 Scaffold함수에 appBar를 선언하고 새로운 AppBar생성해보겠습니다.

class _MaterialFlutterApp extends State<MaterialFlutterApp>{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: Text('Material Design App'),),
    );
  }
}

 

이번에는 오른쪽 아래에 떠 있는 듯한 버튼을 만들어 보게씃ㅂ니다.

스캐폴드에 floatingActionButton을 선언하고 FloatingActionButton() 함수를 생성합니다.

이 함수에 child를 선언하고 Icon을 이용해 Icons.add를 선택해 버튼 안에 + 모양의 아이콘이 표시되도록 합니다.

Icons에는 기본 머티리얼 디자인에 알맞는 아이콘들이 정의되어 있다.

 

class _MaterialFlutterApp extends State<MaterialFlutterApp>{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: Text('Material Design App'),),
      floatingActionButton: FloatingActionButton(child: Icon(Icons.add),
        onPressed: (){

        },
      ),
    );
  }
}

onPressed까지 넣어줘야한다.

 

지금까지 만든 플러터 위젯 구성을 보겠습니다.

 

Body는 앱의 메인화면을 구성하는 본문을 나타낸다.

 

다음 포스팅에선는 body를 선언하고 새로운 컨테이너를 만들어 보겠습니다.

 

최종 소스)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Material Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.cyan,
      ),
      home: MaterialFlutterApp(),
    );
  }
}

class MaterialFlutterApp extends StatefulWidget{
  @override
  State<StatefulWidget> createState(){
    return _MaterialFlutterApp();
  }
}

class _MaterialFlutterApp extends State<MaterialFlutterApp>{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: Text('Material Design App'),),
      floatingActionButton: FloatingActionButton(child: Icon(Icons.add),
        onPressed: (){

        },
      ),
    );
  }
}