모두가 할 수 있는 플러터 UI 입문2

lib/theme.dart

import 'package:flutter/material.dart';

ThemeData theme() {
	return ThemeData(
    	primaryColor: Colors.white,
        appBarTheme: AppBarTheme(
        	iconTheme: IconThemeData(color: Colors.blue),
        )
    )
}

- primaryColor: 브랜드의 아이덴티티

- accectColor: 앱의 상호작용 요소에 사용. 버튼, 링크 등 === secondaryColor

 

double.infinity: width나 height에 이 값을 쓰면 해당 위젯이 차지할 수 있는 최대 크기를 가진다

 

Scaffold.drawer,endDrawer

drawer는 Scaffold의 왼쪽 가장자리에서 오른쪽으로 슬라이드 하는 위젯

endDrawer는 Scaffold의 오른쪽 가장자리에서 왼쪽으로 슬라이드 하는 위젯

슬라이드로 보여줄 위젯을 drawer/endDrawer의 값으로 넣어준다

Scaffold(endDrawer: ProfileDrawer(), appBar: _buildProfileAppBar(), body: Column())

 

CircleAvatar

이미지를 둥글게 만들어준다

return SizedBox(
	width: 100,
    height: 100,
    child: CircleAvatar(
    	backgroundImage: AssetImage("assets/avatar.png"),
    ),
);

위의 코드처럼 width, height 속성이 없는 위젯의 크기를 설정하려면

SizedBox 위젯으로 감싼다

 

이미지를 둥글게 만드는 방법

- Container.decoration

- ClipOver-Image

- CircleAvatar.backgroundImage

 

InkWell

모든 위젯을 버튼화시켜준다

터치에 반응하는 직사각형 영역

보통 Container로 디자인을 한 뒤 InkWell로 감쌈

onTap 속성으로 버튼 클릭 핸들러 설정

return InkWell(
	onTap: () {
    	print("Button Clicked!");
    },
    child: Container(
    	alignment: Alignment.center,
        width: 150,
        height: 45,
        child: Text("Follow", style: TextStyle(color: Colors.white)),
        decoration: BoxDecoration(
        	color: Colors.blue,
            borderRadius: BorderRadius.circular(10),
        )
    )
)

 

버튼을 만드는 방법

- TextButton: 디자인이 없음. 그냥 Text를 클릭하는 효과

- ElevatedButton: elevation 효과로 아래와 오른쪽에 그림자가 생김

- OutlinedButton: 가장자리에 테두리 선

- InkWell: 모든 위젯을 버튼으로 만들어줄 수 있음

 

TabBar

TabBar: 탭의 가로 행 표시(Material)

TabBarView: 현재 선택된 탭에 해당하는 화면

controller에 TabController 객체를 연결해서 선택된 탭에 따라 화면을 변경함

class ProfileTab extends StatefulWidget{
	@override
    _ProfileTabState createState() => _ProfileTabState();
}

class _ProfileTabState extends State<ProfileTab> with SingleTickerProviderStateMixin {
	TabController? _tabController;
    
    @override
    void initState() {
    	super.initState();
        _tabController = new TabController(length: 2, vsync: this);
    }
    
    @override
    Widget build(BuildContext context) {
    	return Column(
        	children: [
            	_buildTabBar(),
                Expanded(child: _buildTabBarView()),
            ]
        )
    }
    
    Widget _buildTabBar() {
    	return TabBar(
            controller: _tabController,
            tabs: [
            	Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
            ]
        )
    }
    
    Widget _buildTabBarView() {
    	return TabBarView(
            controller: _tabController,
            children: [
            	Container(color: Colors.green),
                Container(color: Colors.red),
            ]
        )
    }
}

initState()

StatefulWidget에만 존재하는 초기화 함수

데이터 변경으로 다시 그림을 그릴 때는 호출되지 않음

 

vsync: this

해당 위젯의 싱크를 SingleTickerProviderStateMixin에 맞춘다는 뜻으로

SingleTickerProviderStateMixin은 내부적으로 AnimatedController 위젯으로 구현되어 있는데

현재 화면에 상태가 변경되면(tab을 클릭하면) 애니메이션이 발동디도록 싱크를 맞춘 것

 

 

SingleTickerProviderStateMixin

한 개의 애니메이션을 가진 위젯을 정의할 때 사용

애니메이션이 두 개 이상일 경우에는 TickerProviderStateMixin 사용

Mixin은 클래스가 가진 코드를 재사용하는 데 쓰인다

보통의 프로그래밍 언어는 다중 상속이 불가능해서 여러 클래스를 상속할 수 없지만

mixin 타입은 클래스가 아니기 때문에 클래스를 상속한 상태에서 여러 mixin을 상속할 수 있다

클래스 상속은 extends를 쓰지만

mixin 상속은 with를 쓴다

상속을 통해 타입 일치 및 함수의 재정의를 할 수 있다

Mixin은  is-A 관계: 사자는 동물이면서 뛰다에 속한다. 참새는 동물이면서 날다에 속한다

Composition은 has-A 관계: 사자는 동물이며 뛰다 기능을 가진다. 

타입 일치: 런타임시 동적으로 다른 행동을 할 수 있는 프로그램을 짤 수 있다

 

GridView

수평 혹은 수직방향으로 고정된 수의 위젯을 생성하고 반복해서 List를 출력한다

GridView에 들어갈 Item의 양이 정해져 있다면  GridView

item 개수가 동적이라면 GridView.builder를 사용한다

crossAxisCount는 가로로 몇 개의 item을 넣을지를 나타낸다

GridView.builder(
	gridDelegate: SilverGridDelegateWithFixedCrossAxisCount(
    	crossAxisSpacing: 10,
        crossAxisCount: 3,
        mainAxisSpacing: 10,
    ),
    itemCount: 42,
    itemBuilder: (context, index) {
    	return Image.network("https://picsum.photos/id/${index + 1}/200/200");
    }
)

 

Image.asset()은 내가 가진 asset 폴더 내부 사진의 path를 넣고

Image.network()는 이미지의 url 주소를 넣는다