[Flutter] - 4일차 과제

localhost

it에서 host는 네트워크를 이용하기 위해 네트워크에 연결된 장치를 의미한다.
여기서 장치는 모바일, 데스크탑, 노트북 등이 될 수 있다.
local은 지역이라는 뜻인데 합치면 지역호스트이다. 네트워크 상의 자신으 컴퓨터 주소를 이야기 하는 것이다.
즉, 자기 자신의 컴퓨터를 말 하는 것이고 다른 사람은 접근할 수 없다.

PageView, ListView 제한

pageView와 ListView의 스크롤을 제한하는 속성은 physics이다.
physics의 타입은 ScrollPhysics이다.
이 속성을 사용하여 스크롤을 막거나 계속하게 하거나 다양하게 커스텀을 할 수 있다.

AlwaysScrollableScrollPhysics() : 항상 스크롤 할 수 있도록 만든다.
BouncingScrollPhysics() : IOS 기본 세팅과 유사, 끝 모서리에서 스크롤 하면 바운스 되어 다시 돌아오게 만든다.
ClampingScrollPhysics() : 안드로이 기본 설정 값, 시작과 끝에 도달했을 때 멈추는 효과를 보여준다.
FixedExtentScrollPhysics() : FixedExtentScrollController와 함께 써야지만 사용 가능하다. 항상 항목으로만 스크롤 가능하다.
NeverScrollableScrollPhysics() : 목록을 스크롤할 수 없게 만든다.
RangeMaintainingScrollPhysics() : 범위 내에서 스크롤 위치를 유지하도록 만든다.
PageScrollPhysics() : PageView에 대한 스크롤 방식을 만든다.
ScrollPhysics() : 기본 스크롤 방식을 사용해 새로운 오브젝트를 만들 때 사용한다

physics속성에 사용할 수 있는 위젯들이다.

다음 코드 에러 예상하기

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

ListView는 부모 위젯의 높이에 따라 높이를 맞춘다. 이 때, ListView는 자식 위젯이 적더라도 자신의 차지하고 하는 공간을 최대한으로 차지하고 한다.
그런데 부모로 있는 ListView의 높이가 무한이기 때문에 자식 ListView도 높이가 무한이 되면서 에러가 발생한다. 즉, 자신에게 높이르 지정해달라는 에러이다.
해결 방법으로 2가지가 있다.
첫 번째로 속성 shrinkWrap:true로 해주는 것이다.
이 속성은 크기를 자신이 가지고 있는 자식 위젯으로만 제한을 하는 속성이다.
두 번째는 Expanded 위젯을 사용해서 부모의 남은 부분만 다 가져가라고 알려주어야 한다.

4. pageView
   

import 'package:flutter/material.dart';

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

List<Color> colors = [
  Colors.red,
  Colors.orange,
  Colors.yellow,
  Colors.green,
  Colors.blue,
  Colors.indigo,
  Colors.purple,
];

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: PageView.builder(
          itemCount: 7,
          itemBuilder: (context, index) => Container(
            decoration: BoxDecoration(color: colors[index]),
          ),
        ),
      ),
    );
  }
}

5 기분을 담고 있는 위젯

import 'package:flutter/material.dart';

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

List<String> emotions = ["기분 좋음", "나쁨", "그저그럼"];

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: [
                const Text(
                  "오늘의 하루는",
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 40,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const Text(
                  "어땠나요?",
                  style: TextStyle(
                    color: Colors.grey,
                    fontSize: 22,
                  ),
                ),
                const SizedBox(
                  height: 20,
                ),
                SizedBox(
                  height: 200,
                  child: PageView.builder(
                    itemBuilder: (context, index) => Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 20),
                      child: Container(
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(
                            5,
                          ),
                          gradient: const LinearGradient(
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                            colors: [
                              Colors.red,
                              Colors.orange,
                              Colors.yellow,
                              Colors.green,
                              Colors.blue,
                              Colors.indigo,
                              Colors.purple,
                            ],
                          ),
                        ),
                        child: Text(
                          emotions[index],
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 30,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}