flutter -4

김상윤·2023년 3월 4일

flutter

목록 보기

4/10

로렘입숨

쓸데없는 더미 텍스트 ..글자가 들어가면 어떤 모습일지 알고싶을 떄 사용

SingleChildScrollView

화면의 크기보다 위젯이 더 큰 경우 발생하는 단순한 overflow 해결
자식객체에 스크롤 기능을 만들어줌, 방향설정 가능
scrollDirection 속성을 사용해 원하는 스크롤 방향을 지정

PageView

한 번에 한 위젯만 보여주고, 다음 위젯은 넘겨야만 보여줄 때
여러 페이지를 한 화면에서 처리할 수 있게 해주는 PageView 위젯
PageView(
	children:[
	Text("1번"),
	Text("2번"),
	Text("3번"),
	],
)
자식들로 설정된 Text위젯들이 한 페이지에 한 개씩 들어감

Material App

앞으로 짜게될 모든 하위 페이지나 구성요소를 최 상단에서 담는 그릇
디자인을 쉽게 할 수 있도록, 어플전체에 자동으로 기반, 건물을 짓기위한 땅
앱으로서 기능을 할 수 있도록 해주는 뼈대

Scaffold

기본적인 material design의 시각적인 레이아웃 구조를 실행
구성된 앱에서 디자인적인 부분에서의 뼈대

Appbar

앱의 헤더 -> Scaffold(Appbar)에 넣음

appBar: AppBar(
	title : text(""), ->제목
	backgroundColor: Colors.red -> 색상
	centerTitle: false ->글자 왼쪽으로, 가운데가 기본값
	backgroundColor: Colors.transparent ->배경색 없애기
	elevation: 0 -> 배경색, 그림자 없애기
	foregroundColor: 전경색 
	leading: 앞에 위젯 넣기
	actions: [    -> 뒤에 위젯 넣기, 리스트형태로
		위젯, 위젯, 위젯
	]
),

BottomNavigationBar

앱들의 스크린 네비게이션
scaffold에 넣어서 사용, 필수속성 값은 items이다. items의 갯수는 두개가 넘어야한다
나중에 내가 선택한 인덱스에 따라 바뀌는 화면을 만들 수 있다

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.fixed,
  backgroundColor: Colors.grey, //Bar의 배경색
  selectedItemColor: Colors.white, //선택된 아이템의 색상
  unselectedItemColor: Colors.white.withOpacity(.60), //선택 안된 아이템의 색상
  selectedFontSize: 14, //선택된 아이템의 폰트사이즈
  unselectedFontSize: 14, //선택 안된 아이템의 폰트사이즈
  currentIndex: _selectedIndex, //현재 선택된 Index
  onTap: (int index) { //눌렀을 경우 어떻게 행동할지
    setState(() { //setState()를 추가하여 인덱스를 누를때마다 빌드를 다시함
      _selectedIndex = index; //index는 처음 아이템 부터 0, 1, 2, 3
    });
  },
  items: [
    BottomNavigationBarItem(
      title: Text('Favorites'),
      icon: Icon(Icons.favorite),
    ),
    BottomNavigationBarItem(
      title: Text('Music'),
      icon: Icon(Icons.music_note),
    ),
    BottomNavigationBarItem(
      title: Text('Places'),
      icon: Icon(Icons.location_on),
    ),
    BottomNavigationBarItem(
      title: Text('News'),
      icon: Icon(Icons.library_books),
    ),
  ],
),

FloationActionButton(FAB)

스캐폴드에 넣어서 사용, 필수속성값은 onPressed이며 function(함수)을 줘야한다.
눌렀을 때 어떤 기능을 할 것인지 {}안에 정의.
floatingActionButton: FloationgActionButton(
	onPressed: () {},
	child: Icon(Icons.add), -> 어떤 아이콘이 들어갈 것인지
	mini = true, ->작게
	elevation : 0, ->그림자 없애기
	backgroundClolor: Colors.black -> 배경색
)

과제

localhost란?

PageView와 ListView의 유저 행동 제한

ListView 코드 에러 분석

가로 스크롤 색상 변경 UI 만들기

기분을 담고있는 스크롤 페이징 UI 만들기

Localhost?

localhost 컴퓨터 네트워크에서 사용하는 루프백 호스트명으로, 자신의 컴퓨터를 의미 localhost는 말 그대로 해석하면 지역(local)+호스트(host)로 IT에서 말하는 localhost는 네트워크 상에서 자신의 컴퓨터의 주소를 뜻한다. localhost는 자신의 컴퓨터를 뜻하고, 다른 컴퓨터에서는 이 주소에 접근할 수는 없다. 로컬호스트의 IPv4에서의 IP 주소는 127.0.0.1이다

PageView나 ListView는 유저의 행동에 따라서 작동

만약 유저의 행동을 제한하고 싶으면 어떤 속성 값을 설정해야하는지 정리하세요.
예를들어, PageView는 페이지 변경을 제한하고, ListView는 스크롤이 안되게 제한합니다.

ScrollPhysics

AlwaysScrollableScrollPhysics() : 항상 스크롤 할 수 있도록 만든다.

BouncingScrollPhysics() : IOS 기본 세팅과 유사, 끝 모서리에서 스크롤 하면 바운스 되어 다시 돌아오게 만든다.

ClampingScrollPhysics() : 안드로이 기본 설정 값, 시작과 끝에 도달했을 때 멈추는 효과를 보여준다.

FixedExtentScrollPhysics() : FixedExtentScrollController와 함께 써야지만 사용 가능하다. 항상 항목으로만 스크롤 가능하다.

NeverScrollableScrollPhysics() : 목록을 스크롤할 수 없게 만든다.

RangeMaintainingScrollPhysics() : 범위 내에서 스크롤 위치를 유지하도록 만든다.

PageScrollPhysics() : PageView에 대한 스크롤 방식을 만든다.

ScrollPhysics() : 기본 스크롤 방식을 사용해 새로운 오브젝트를 만들 때 사용한다.

ListView 코드 에러 분석

ListView(
	children: [
		Text('안녕 난 1번 ListView의 자식이다'),
		Text('나도! 1번 ListView의 자식이야'),
		ListView(
			children: [
				Text('난 2번의 자식임'),
				Text('나도 2번의 자식임'),
			]
		),
		Text('난 멀리 떨어져있지만 1번의 자식이야'),
	]
)

실행하면 The relevant error-causing widget was ListView 이런 오류가 뜨게 된다.
세로 방향으로 확장을 시도하는데 ListView의 높이를 지정해주지 않는 다면 뜨게 된다고 한다.
해결 방법으로는 expanded()로 ListView를 감싸거나 sizedbox로 높이를 지정 또는
ListView의 속성인 shrinkWrap의 기본값인 false에서 true로 바꾼다면 해결된다.

수정코드

import 'package:flutter/material.dart';
void main() { runApp(const MyApp()); }
class MyApp extends StatelessWidget { 
const MyApp({super.key});
@override 
Widget build(BuildContext context) { 
return MaterialApp( 
home: Scaffold( 
body: ListView( 
shrinkWrap: true, 
children: [ Text('안녕 난 1번 ListView의 자식이다'), 
Text('나도! 1번 ListView의 자식이야'), 
ListView( shrinkWrap: true, 
children: [ 
Text('난 2번의 자식임'), 
Text('나도 2번의 자식임'), 
], 
), 
Text('난 멀리 떨어져있지만 1번의 자식이야'), 
]),
), 
); 
} 
}

가로 스크롤 색상 변경 UI 만들기

import 'package:flutter/material.dart';
void main() { runApp(const MyApp()); }
class MyApp extends StatelessWidget { 
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp( 
home: Scaffold(
body: PageView(
children: [ 
Container( color: Colors.blue, ), 
Container( color: Colors.red, ), 
Container( color: Colors.orange, ),
Container( color: Colors.green, ),
Container( color: Colors.purple, ), 
], )), ); } }

가로로 스크롤을 하면 화면을 채운 컨테이너의 색상이 바뀜

기분을 담고있는 스크롤 페이징 UI 만들기

import 'package:flutter/material.dart';
void main() { runApp(const MyApp()); }
class MyApp extends StatelessWidget { const MyApp({super.key});
@override
Widget build(BuildContext context) { 
return MaterialApp( 
home: Scaffold( 
body: SafeArea( child: Center( 
child: Column(
mainAxisAlignment: MainAxisAlignment.center, 
children: [
Text( "오늘의 하루는", style: TextStyle(fontSize: 25, color: Colors.black), ), Text( "어땠나요?", style: TextStyle(fontSize: 15, color: Colors.grey), ), Container( width: 150, height: 50, child: PageView(
children: [ Container(
decoration: BoxDecoration( gradient: LinearGradient( colors: [Colors.blue, Colors.red], ),
borderRadius: BorderRadius.circular(50), ),
child: Text("좋음", textAlign: TextAlign.center), ),
Container( decoration: BoxDecoration( gradient: LinearGradient( colors: [Colors.green, Colors.purple]),
borderRadius: BorderRadius.circular(50), ), 
child: Text("나쁨", textAlign: TextAlign.center), ),
Container( decoration: BoxDecoration( gradient: LinearGradient( colors: [Colors.deepOrange, Colors.lime]),
borderRadius: BorderRadius.circular(50), ), 
child: Text("졸림", textAlign: TextAlign.center), ),
], ), ) ], ), ), )), ); } }