20230802 TIL

Today 요약

[✅] 프로그래머스 1문제

[✅] flutter 코드챌린지 2개

[✅] flutter 랜덤 2개

[✅] flutter 위젯 영상 1개

[✅] flutter 강의 3개

---

배운 점

flutter  랜덤하나 배우기

1) autocorrect property

• 자동 수정 속성 : 기본값은 true / null일수가 없다

final bool autocorrect;

2) ErrorSummary 클래스

• 감지된 문제에 대한 짧은 한줄 설명
• 간단한 테스트 코드로 아래와같이 적용할 수 있다

ErrorSummary class - foundation library - Dart API

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ErrorSummaryExample(),
    );
  }
}

class ErrorSummaryExample extends StatelessWidget {
  void _triggerError() {
    // 이 함수에서 오류를 강제로 발생시킵니다.
    throw Exception('이것은 예제 오류입니다.');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ErrorSummary 예제'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            try {
              _triggerError();
            } catch (e) {
              showDialog(
                context: context,
                builder: (context) => AlertDialog(
                  title: Text('오류 발생'),
                  content: Text(ErrorSummary(e).toString()),
                  actions: <Widget>[
                    TextButton(
                      onPressed: () => Navigator.of(context).pop(),
                      child: Text('닫기'),
                    ),
                  ],
                ),
              );
            }
          },
          child: Text('오류 발생 시도'),
        ),
      ),
    );
  }
}

 

1)   NestedScrollView()

• 이 위젯이 가장 흔하게 쓰이는 경우는 SliverAppBar와 TabBar를 사용하는 경우이다
• 다른 스크롤뷰와 중첩가능

NestedScrollView(
	 headerSliverBuilder: (context, innerBoxIsScrolled) {
     	return [];
     }
     body : TabBarView()
)

• headerSliverBuilder 파라미터를 필요로 함
• headerSliverBuilder : sliver들로 이루어진 list를 반환

NestedScrollView class - widgets library - Dart API

2)  Stack() Positioned() - 복습

• position 중복이 가능한 위젯 
• Stack  : 위젯 리스트를 가지고 밑에서부터 형성 지정되지않는 모든 하위 요소에 맞추고자 디폴트로 크기자 정해진다
• Positioned : 스택내에서 특정 하위 요소에 특정위치를 지정할 수 있다
• 오버플로 속성을 사용하여 경계선을 벗어날지 말지 정할 수 있다

Stack class - widgets library - Dart API

overflow : Overflow.clip

 

3) SliverPersistentHeader() - 복습 

• 분명 어제 배운건데 또 까먹었다

SliverPersistentHeader(
    delegate: PersistentTabBar(),
    pinned: true,
),

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class PersistentTabBar extends SliverPersistentHeaderDelegate {
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border.symmetric(
            horizontal: BorderSide(
              color: Colors.grey.shade200,
              width: 0.5,
            ),
          )),
      child: const TabBar(
        labelColor: Colors.black,
        labelPadding: EdgeInsets.symmetric(
          vertical: 22,
        ),
        indicatorColor: Colors.black,
        indicatorSize: TabBarIndicatorSize.label,
        tabs: [
          Padding(
            child: Icon(Icons.grid_3x3),
          ),
          Padding(
            child: FaIcon(FontAwesomeIcons.heart),
          ),
        ],
      ),
    );
  }

  @override
  double get maxExtent => 52;

  @override
  double get minExtent => 52;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}

4) 인스타처럼 스크롤시 헤더에 달라붙는 탭뷰 (?)

• 네이버 장소 검색도 비슷하게 적용할 수 있을 거 같다 대충레이아웃만 정리

SafeArea(
	child:DefaultTabController(
    	length:2, 
        child:NestedScrollView( //스크롤중복
        	headerSliverBuilder: (context, innerBoxIsScrolled) {
            	return [
                	SliverAppBar(),
                    SliverToBoxAdapter(),
                    SliverPersistentHeader(),
                ], 
            }, 
            body:TabBarView(
            	children :[
                	GridView.builder()
                ]
            )
        )
    )
)

 

5) mounted 프로퍼티

• 모든 Stateful widget에는 mounted라는 프로퍼티가 있다
• 위젯이 mount되었는지 아닌지 확인

6) CloseButton

• 기본으로 xMark모양의 버튼을 렌더링해주는 위젯 

7) ListwheelScrollView

ListWheelScrollView(
        itemExtent: itemExtent,
        children: children,
),

• 바퀴 느낌의 스크롤

8) 로딩중일때 보여지는 위젯

CupertinoActivityIndicator(), //IOS
CircularProgressIndicator(), //Android
CircularProgressIndicator.adaptive() //플랫폼 확인 후 플랫폼에 맞춰서 보여줌

 

 

---

복습만이 살길... 똑같은거 또 또정리하다보면 어느새 외워지겠지 갓 flutter!!! 갓 닊꼴라스샘,,, !!!고마와요