[플루터] MaterialApp / Scaffold 클래스 이용해보기

노마드 코드를 조금보다 클래스에 대한 이해가 부족해 해당 코드로 테스트를 해보았다.

 

import 'package:flutter/material.dart';

void main() {

  runApp(App());

}

class App extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: Text('Hello flutter!'),

          backgroundColor: Color.fromRGBO(255, 0, 0, 0),

          bottom: AppBar(title: Text('Hello bottom')),

        ),

        body: Center(child: Text('Hello user!')),

      ),

    );

  }

}

해당코드가 기본코드이다.

1. 기본 화면

---

marterialApp 을 리턴할 시 화면에 값이 표출은 되지만 화면의 크기를 잡지 못한다.

그렇기에 해당 클래스안에 있는 children을 사용하도록 한다.

home : Scaffold()  -> 화면의 크기를 잡아준다. 기본적인 사이즈를 잡아줌

Scaffold ( appBar : AppBar ( title : Text('Hello flutter' ) ),
정말 편하게 타이틀을 바로 잡아준다...

 

 

가운데로 바로 잡히고 디자인이 기본적으로 있다는건 몹시 편한거같다.

 

 

2. 타이틀 색상 변경

---

처음으로 해보는 플루터라 PHP를 사용하던 나에겐 클래스라는게 너무 어색해서 조금씩 변환시키기 시작..
디자인의 수정이 어느정도 어렵다고 들어 미리부터 연습을위해 색상을 변경해보았다.


     home: Scaffold(
        appBar: AppBar(
          title: Text('Hello flutter!'),
          backgroundColor: Color.fromRGBO(255, 0, 0, 0),
        ),

AppBar부터 졸졸졸.. 마우스를 갓다대서 클래스를 따라온 결과 색상의 변경에 성공했다.

기본 dart 명령어를 졸졸 따라다니다보니 알게된건데 위젯으로 불러오는 값들은 모두 final로 선언이 되어있어 정확한 값을 입력하지 않으면 에러가 난다.

  final Color? backgroundColor; 
백그라운드를 변경하는 도중 계속 그냥 255,0,0 을 넣으니 String타입으로 취급되 취소되었다.

 

 

3. bottom

---

this.bottomSheet, 분명 .. scaffold에 이런 클래스가 있는데 위젯을 사용하라고 해서.. 일단은 보류

그냥 bottom을 사용해 푸터에 메뉴를 넣는곳을 미리 만드는방법을 알고싶었는데 .. 막상 생성하니 타이틀 바로 밑에 들어가서 조금 애매하게 되어버렸다.

그래도 클래스에서 스스로 뭔가를 가져와서 사용한다는건 생각보다 의미가 있는일 같으니, 조금 더 공부하고 다시 살펴보도록 해야겠다.

위젯안에 위젯을 사용한다는게 아직 전혀 와닿지 않는다..

 

프로젝트가 많아 많은글을 적으면서 공부는 못할거같은데 틈틈히.. 짬내서 노마드코드 공부하며 느낀점을 올리도록 해야겠다.