diff --git a/practice_code/README.md b/practice_code/README.md index e8522da73dfb9e9b4ed736dee040395453a79997..fc59c822cc2f7d4aec869d9c9880f67b1035ffe2 100644 --- a/practice_code/README.md +++ b/practice_code/README.md @@ -1,2 +1,21 @@ # 캐릭터 페이지 디자인 -<img src="/uploads/d8948f3fb5bab8ebe473780d0cbbe64d/simu.png" width="300" height="650"> +아래는 완성된 캐릭터 페이지이다 +<img src="/uploads/d8948f3fb5bab8ebe473780d0cbbe64d/simu.png" width="300" height="650"> +# +## Flutter 클래스 설명 +Flutter 클래스는 크게 statelessWidget과 statefulwidget으로 나눌 수 있다 +* statefulwidget은 페이지에 변화가 없는 정적인 페이지 구성을 할 때 사용하는 클래스이다 +* statefulwidget은 페이지의 변화가 있는 동적인 페이지 구성을 할 때 사용하는 클래스이다 +실습에서는 statelessWidget을 사용하여 캐릭터 페이지를 구성하였다 +``` +Scaffold( + appbar: AppBar( + title: Text('FOSS'), + ... + ) + body: ... +) +``` +`Scaffold`는 App의 화면을 구성하는데 가장 기본이 되는 클래스이다 +`appbar` 속성은 앱의 상단을 구성하며 앱의 title등을 넣을 수 있고 좌우로 아이콘을 넣어 tap을 했을 때 어떤 동작을 수행하게 할 수 있다 +'body' 속성은 앱의 가운데 메인화면을 구성한다. 여기에서는 다양한 클래스를 이용하여 화면을 구성할 수 있다 실습에서는 `Padding` `Divider` `Column` `Row` 등의 클래스를 사용해 보았다