모앱 video4 - Layout Part1

중앙대학교 소프트웨어학과 이준우교수님 '모바일앱개발'강의를 참고하여 포스팅하였습니다.

이런거 만들어볼거에용~

---

빈 main.dart 에서부터 시작해보도록 하겠다.

​

먼저 위젯이 담겨있는 플러터 라이브러리를 import해야 한다.

Material과 Cupertino라는 두가지 세트의 위젯이 있다.

이번 시간에는 Material 위젯을 쓸거다.

import 'package:flutter/material.dart';

​

main함수 작성은 아래처럼 하면 된다.

main함수는 runApp함수만 쓴다!

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

stateless위젯을 만들어보자.

(빨리 만드는 법 : stless 치고 Tab키 / stateful위젯 빨리 만드는 법은 stful 치고 Tab키)

​

import 'package:flutter/material.dart'; void main(){ runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Container(); } }

만든 statelss위젯의 이름을 MyApp으로 해주고 메인함수 내에 const도 붙여준다.

​

여기까지 하고 실행하면 이렇게 빈 창이 뜬다.

​

MaterialApp 위젯으로 material app을 만들어보자

property title 에는 app의 이름이 들어간다.

property theme에는 ThemeData 위젯을 넣어준다.

ThemeData 위젯 안에서는 앱의 일반적인 테마들을 설정할수 있다.

property home에는 앱의 페이지들을 넣어줄 수 있다.

MyHomePage라는 이름의 페이지를 넣어주겠다.

​

MaterialApp(

title :

theme :

home :

);

​

그럼 이제 stateless위젯 MyhomePage를 만들어보자.

여기까지 하고 나서 run해봐도 아무것도 안뜬다.

view를 만들기 위해서는 Scaffold 위젯이 필요하다.

property appBar는 앱의 맨 윗부분의 title 부분이다.

Text위젯으로 제목을 써보도록 하겠다.

property body에는 main part를 할당한다.

 

Flutter project 에 assets이라는 이름의 directory를 만들어준다.

assets안에는 fonts디렉토리를 만들어준다.

font file(.ttf)를 copy해서 fonts 디렉토리에 넣어준다.

 

pubspec.yaml파일로 가서 fonts를 등록해준다.

들여쓰기 꼭 주의해서 해주기

​

다시 main.dart로 돌아와서

font family의 이름을 MaterialApp 위젯 안의 fontFamily property 안에 써준다.

 

reload 해보면 글씨체가 잘 바뀌었다.

appBar의 색깔을 바꾸고 싶다면

ThemeData 안의 primarySwatch 속성을 이용하면 된다.

​

다른 원하는 색깔을 넣고 싶다면

styles.dart파일을 lib 디렉토리에 만들어보자.

​

먼저 import부터 해주고

class도 만들어준다.

구글에 color-picker을 검색해 https://imagecolorpicker.com/ 로 들어가 원하는 색의 코드를 찾는다.

👍 Color Picker online | HEX Color Picker | HTML Color Picker

Color Picker:Color Picker: With this online tool you can upload an image or provide a website URL and get the RGB Color, HEX Color and HSL Color code. 👍

imagecolorpicker.com

RGB code를 copy하면 된다.

0xFF

0x : 16진수 표기법

FF : 색깔의 최대 opacity

0xFF 뒤에 복사한 코드를 붙여넣기 해주면 된다.

styles.dart

이제 main.dart로 가서 styles.dart 파일을 import해야한다.

AppBar 위젯의 backgroundColor 속성에 등록한 색깔을 써보자.

이쁘다 ><

AppBar 위젯 안의 leading 속성을 이용해 icon을 왼쪽에 추가할 수 있다.

눌리진 않는다

leading속성 대신에

Scaffold 위젯 안에 있는 drawer 속성을 이용하면 왼쪽에 서랍장을 만들 수 있다.

서랍장이 열렸다~

아이콘을 오른쪽에 위치시키고 싶다면?

AppBar위젯 안에 action 속성을 이용하면 된다.

 

​

layout과 관련된 유용한 위젯

container위젯을 추가해보자.

 

 

width랑 height로 container의 크기를 조절할수도 있다.

축을 따라 정렬하려면 crossAxisAlignment 속성을 사용해주면 된다.

mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.start,

 

stretch를 해줬더니 늘어났다!

둘다 end로 해주면

​

stack위젯도 유용한 위젯이다.

 

 

​

이제 스크롤해서 내릴수 있는 scrollable lists를 만들어보자.

먼저 0부터 99까지 숫자배열을 생성해보자.

final items = List.generate(100,(i)=>i).toList();

const때문에 error가 뜨면 const를 제거해준다.

import 'package:flutter/material.dart'; import 'package:flutter_app_chap_4/styles.dart'; void main(){ runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primaryColor: Colors.blue, primarySwatch: Colors.teal, fontFamily: 'Cabin', ), home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { MyHomePage({Key? key}) : super(key: key); final items = List.generate(100,(i)=>i).toList(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: AppColor.Glacier, title: Text('Flutter Demo'), actions: [ IconButton(onPressed: (){}, icon: Icon(Icons.add)), ], ), body: Stack( alignment: Alignment.bottomRight, children: [ Container( color: Colors.teal, width:150, height:150, padding: const EdgeInsets.all(5.0), margin: const EdgeInsets.all(5.0), ), Container( color: Colors.indigo, width:100, height:100, padding: const EdgeInsets.all(5.0), margin: const EdgeInsets.all(5.0), ), Container( color: Colors.indigoAccent, width:80, height:80, padding: const EdgeInsets.all(5.0), margin: const EdgeInsets.all(5.0), ), ], ), drawer: const Drawer(), ); } }

scaffold 안 body를 비워준다.

SingleChildScrollView 위젯 안에 Column 위젯을 child로 추가해준다.

배열은 이런식으로 써준다.

플러터에서 배열 쓰는 방법

배열은 잘 나왔지만 숫자 바깥을 스크롤하면 스크롤이 안됨.

되게 하려면

Column 위젯을 ListBody로 바꿔보자.

원하는데로 스크롤이 되는 걸 확인할 수 있다.

​

좀더 정갈한 list 포멧을 구현하려면 ListView 위젯을 쓰면된다.

scrollDirection : 스크롤 방향 결정

​

 

​

import 'package:flutter/material.dart'; import 'package:flutter_app_chap_4/styles.dart'; void main(){ runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primaryColor: Colors.blue, primarySwatch: Colors.teal, fontFamily: 'Cabin', ), home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { MyHomePage({Key? key}) : super(key: key); final items = List.generate(100,(i)=>i).toList(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: AppColor.Glacier, title: Text('Flutter Demo'), actions: [ IconButton(onPressed: (){}, icon: Icon(Icons.add)), ], ), body:ListView( scrollDirection: Axis.vertical, children: [ ListTile( leading: const Icon(Icons.home), title: const Text('Home'), trailing: const Icon(Icons.navigate_next), onTap: (){}, ), ListTile( leading: const Icon(Icons.abc), title: const Text('word'), trailing: const Icon(Icons.navigate_next), onTap: (){}, ), ListTile( leading: const Icon(Icons.golf_course), title: const Text('golf_course'), trailing: const Icon(Icons.navigate_next), onTap: (){}, ), ListTile( leading: const Icon(Icons.face), title: const Text('face'), trailing: const Icon(Icons.navigate_next), onTap: (){}, ), ListTile( leading: const Icon(Icons.access_alarm), title: const Text('access_alarm'), trailing: const Icon(Icons.navigate_next), onTap: (){}, ), ListTile( leading: const Icon(Icons.access_alarm), title: const Text('access_alarm'), trailing: const Icon(Icons.navigate_next), onTap: (){}, ), ListTile( leading: const Icon(Icons.access_alarm), title: const Text('access_alarm'), trailing: const Icon(Icons.navigate_next), onTap: (){}, ), ListTile( leading: const Icon(Icons.access_alarm), title: const Text('access_alarm'), trailing: const Icon(Icons.navigate_next), onTap: (){}, ), ListTile( leading: const Icon(Icons.access_alarm), title: const Text('access_alarm'), trailing: const Icon(Icons.navigate_next), onTap: (){}, ), ListTile( leading: const Icon(Icons.access_alarm), title: const Text('access_alarm'), trailing: const Icon(Icons.navigate_next), onTap: (){}, ), ], ), drawer: const Drawer(), ); } }

ListVIew 위젯 안 children에 배열을 넣어주면 이렇게 원하는 개수만큼 반복할 수도 있다.

​

import 'package:flutter/material.dart'; import 'package:flutter_app_chap_4/styles.dart'; void main(){ runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primaryColor: Colors.blue, primarySwatch: Colors.teal, fontFamily: 'Cabin', ), home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { MyHomePage({Key? key}) : super(key: key); final items = List.generate(100,(i)=>i).toList(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: AppColor.Glacier, title: Text('Flutter Demo'), actions: [ IconButton(onPressed: (){}, icon: Icon(Icons.add)), ], ), body:ListView( scrollDirection: Axis.vertical, children: List.generate(50,(i) { return ListTile( leading: const Icon(Icons.access_alarm), title: Text('Alarm ${i+1}'), trailing: const Icon(Icons.navigate_next), onTap: (){}, ); }), ), drawer: const Drawer(), ); } }

​