Flutter 위젯 탐방기3 - 오늘의 위젯 정리하기

1. RawMagnifier

https://www.youtube.com/watch?v=YBRkVCRP1Gw&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=35

특징

• 원하는 텍스트 위로 손가락을 드래그하면 플랫폼별로 특화된 돋보기를 활용해 텍스트를 크게 확대할 수 있는 위젯
• 사용자가 돋보기의 크기를 조절하거나 모양을 변경하거나 텍스트 뿐 아니라 UI요소까지 확대할 수 있도록 해줌

주의사항

• 자동적으로 위치를 계산해주지 않기 때문에 드래그 좌표를 직접 관리할 필요가 있습니다.
• 스크롤 가능한 위젯과 함께 사용하면 충돌이 날 수 있으니 우선순위를 조정해야합니다.
• 배율이 필요 이상으로 큰 경우 텍스트 픽셀이 깨질 수 있습니다.

활용 예제

기본 흐름

1. GestureDetector로 드래그 위치 추적

2. 드래그 중일 때만 RawMagnifier 표시

3. 드래그 종료 시 돋보기 제거

 

//사용할 시에 GestureDetector을 Stack안에 넣어 드래그 위치 세부 정보를 저장하는 데 사용하면 됨
Stack(
	children: <Widget>[
    	GestureDetector(
        	onPanUpdate: _showMagnifier,
            onPanEnd: _removeMagnifier,
            child: WidgetToMagnify() //돋보기가 사용될 위젯
        ),
        if(_showMagnifier)
        Positioned(
        	left: dragGesturePosition.dx,
            top: dragGesturePosition.dy,
            child: RawMagnifier({
						decoration: MagnifierDecoration(), //사용자정의스타일 추가
    					focalPointOffset: Offset.zero, 
    					magnificationScale: 1, //확대 배율 조정
    					size: Size(150,150), //크기조절
					})
        ),
        //...

 

---

2. NavigationBar

https://www.youtube.com/watch?v=DVGYddFaLv0&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=39

 

특징

• 바텀 네비게이션 바는 Material2를 쓰는 것과 달리 Material3디자인 시스템으로 만들어짐
  • 알약 모양로 대비되는 강조 배경을 제공함
  • 아이콘 + 라벨 구조가 더 현대적이고 접근성 친화적으로 변화함
• 더 큰 화면에 앱을 띄우고 싶을 때, NaviagationRail과 연결하면 화면이 커질수록 Bottom Navigation → Navigation Rail → Navigation Drawer로 자연스럽게 확장되는 네비게이션 시스템 구성 가능
• 상태기반으로 화면 전환을 관리함

주의사항

• 탭의 개수는 3~5개를 권장하고, 이보다 많은 수가 필요한 경우에는 NavigationRail을 고려할 필요가 있습니다.
• Material 3 테마(useMaterial3: true)를 필수적으로 활성화시켜주어야합니다.

 

활용 예제

selectedIndex	현재 선택된 페이지 인덱스
onDestinationSelected	항목 선택 시 콜백
destinations	네비게이션 목적지 목록
labelBehavior	라벨 표시 방식
backgroundColor	네비게이션 바 배경
animationDuration	선택 변경 애니메이션 시간

NavigationBar(
	onDestinationSelected: (int index){
    	setState(() {
        	currentPageInext = index;
        }
    },
	destinations: [
    	NavigationDestination(
        	icon: ICon(Icons.home),
            label: 'home',
        )
     	NavigationDestination(
        	icon: ICon(Icons.home),
            label: 'home',
        )
     	NavigationDestination(
        	icon: ICon(Icons.home),
            label: 'home',
        )
    ],
    selectedIndex: buttentPageIndex,
    labelBehavior: onlyShowSelected, //꾸미기 기능
    backgroundColor:,
    animationCuration: Duration(ms:100) //선택 여부에 따른 앱 상태 변화 시, 애니메이션 부여
)

//labelBehavior 옵션 종류
//NavigationDestinationLabelBehavior.alwaysShow
//NavigationDestinationLabelBehavior.onlyShowSelected
//NavigationDestinationLabelBehavior.alwaysHide

 

---

3. FutureBuilder

https://www.youtube.com/watch?v=zEdw_1B7JHY&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=40

 

특징

• 비동기 작업(Future) 결과에 따른 UI를 쉽게 구성할 수 있는 위젯
• 로딩/완료/에러 상태를 자동으로 감지하고 화면 표시
• Dart/Flutter은 싱글 스레드지만, Future를 통해 IO, HTTP, DB호출 등을 UI블로킹 없이 처리할 수 있음
• snapshot객체로 현재 상태를 확인할 수 있음

주의사항

• FutureBuilder내에 Future를 직접 불러오면 매번 rebuild시 Future가 재실행되기 때문에 바깥에서 호출해야합니다(initStated에서 미리 생성 후 전달)
• snapshot 상태에 따른 UI분기를 필수적으로 처리해야하며, 가능하다면 에러 상황에서의 UI분기도 꼼꼼하게 처리해줄 필요가 있습니다.

활용 예제

Future<Mydata> _data;

initState(){
	_data =  http.get('heep://awesome.data'), //예제

FutureBuilder(
	future: _data,
    //future: http.get('heep://awesome.data'),//직접넣는 건 X
   
    builder: (context, snapshot){
    	if(snapshot.connestionState == done){
        	if(snapshot.hasError)
    			return AwesomeData(snapshot.data);
        }
        else
        	return CircularProgressIndicator();
    }
)

ConnectionState.active;
ConnectionState.done;
ConnectionState.waiting;
ConnectionState.none;

 

 

---

4. Firebase UI

https://www.youtube.com/watch?v=jtFaMv2vGF0&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=41

특징

• Firebase Authentication과 함께 사용하는 인증 UI 패키지
• 로그인 / 회원가입 / 비밀번호 재설정 / 프로필 화면 등을 기본 UI로 제공
• firebase_ui_auth 하나로 전체 인증 플로우 구현 가능
• 구글, 애플, 깃허브, 트위터, 이메일 등 다양한 인증 공급자 지원
• OAuth 기반 공급자(Google 등)는 Client ID만 설정하면 사용 가능
• 기본 화면 제공 + 커스텀 위젯/컨트롤러로 완전한 커스터마이징 가능

주의사항

• Firebase 콘솔에서 Authentication → Sign-in providers 활성화가 필수로 필요합니다.
• OAuth 제공자는 플랫폼별 설정이 필요합니다(google = clientId)
• Web, Android, iOS 각각의 설정이 누락되면 런타임 에러가 발생할 수 있으므로 주의해야합니다.

활용 예제

@override
Widget build(BuildContext context){
	return MaterialApp(
    	routes: {
        	'/': (context) => HomeScreen(),
            '/sign-in' : SignInScreen(
           		providers: const [//인증제공자 요소목록
                	EmailAuthProvider(),
                    GoogleProvider(clientId: '1234abcd')
                    GithubProvider(...),
                    AppleProvider(...),
                    TwitterProvider(...)
                ],
            ),
         },
     );
 }

 

---

4. Autocomplete

https://www.youtube.com/watch?v=-Nny8kzW380&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=50

 

특징

• 사용자가 입력하는 텍스트를 기반으로 실시간 자동완성 경험을 제공하는 위젯
• 제네릭 기반(Autocomplete<T>)위젯으로, String가 아닌 커스텀 객체 가능
• UI  완전 커스터마이징이 가능
• 내부적으로 TextField + Overlay + Focus 구조를 사용

주의사항

• optionsBuilder은 매 입력마다 호출되므로, 네트워크 호출 등의 상황에서는 debounce가 필요합니다.
• optionsViewBuilder를 사용하는 경우, onSelected를 호출하지 않으면 선택되지 않습니다.
• Overlay기반이기 때문에 부모 위젯의 제약에 주의하여 사용해야합니다.

활용 예제

Autocomplete<String>(
	optionsBuilder: (textEditingValue) {
    	return data.filter(
        	(entry) =>
            	entry.contains(
                	textEditingValue.text,
                )
        );
        //displayStringForOption를 통한 String 변환
        displayStringForOption: 
        	(MyCustomType obj) => obj.name
        )
        //일치대상 표시 방식 제어
        optionsViewBuilder: (
        	context,
            onSelected,
            options,
        ) => ListView.builder(
        	itemCount: options.length,
            itemBuilder: (context, index) {
            	return Widgets(options[i]);
            },
        ),
        //사용자가 일치 대상 중 하나를 탭한 시점의 상호작용
       onSelected: (MyCustomType obj) {
		stateManagement.toggle(obj);
        },
        //원래의 텍스트 입력값? 형태를 유지하는 방법
        fieldViewBuilder: (
        	context,
            textEditingController,
            focusNode,
            onFieldSubmitted,
        ) => MyFancyTextInput(...),
       ),
    },
)

 

---

5. NavigationRail

 

https://www.youtube.com/watch?v=y9xchtVTtqQ&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=51

특징

• 사이드 내비게이션 메뉴로 바텀내비게이션바와 같은 기능을 하는 위젯
• 태블릿·웹·데스크톱 같은 넓은 화면에서 사용하기 적합

주의사항

• BottomNavigationBar과는 동시에 사용하지 않습니다.
• 상태관리를 명확하게 하지 않으면 인덱스가 꼬이는 문제가 발생할 수 있습니다.
• 반응형 설계를 진행한다면 LayoutBuilder 및 MediaQuery와 함께 사용되는 것을 권장하고 있습니다.

활용 예제

NavigationRail(
	selectedIndex: _selectedIndex,
    onDestinationSelected: changeDestination,
	destinations: <NavigationRailDestitination>[
    	NavigationRailDestination(
        	icon: Icon(Icons.house_outlined),
            selectedIcon: Icon(Icons.house),
            label: Text('Home'),
        ),
        NavigationRailDestination(
        	icon: Icon(Icons.house_outlined),
            selectedIcon: Icon(Icons.house),
            label: Text('Home'),
        ),
    ],
    minwidth:100,
    labelType: NavigationRailLabelType.all,
    selectedLabelTextStyle: TextStyle( 
    	color: Colors.lightBlue[500],
    ),
    unselectedLabelTextStyle: TextStyle(
    	color: Colors.grey[400],
    ),
    elevation:4,
    useIndicator: true, //선택된 아이콘 강조
    backgroundColor:Colors.white,
    indicatorColor:Colors.blue,
    leading: LeadingWidget(),
    trailing: TrailingWidget(),
    
)

 

---

6.  FocusableActionDetector

 

https://www.youtube.com/watch?v=R84AGg0lKs8&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=53

 

특징

• Actions, Shortcuts, Focus , MouseRegion 위젯을 하나로 결합한 통합 위젯
• 위젯과 키보드 상호작용이 가능하고, 호버, 포커스 등의 시각 효과를 처리 가능
• 커스텀 버튼 제작 시 유용

주의사항

• 모바일에서는 hover의 개념이 거의 없기 때문에 해당 위젯의 사용은 오버엔지니어링 설계일 수 있습니다
• GestureDetector 와 중복동작할 수 있습니다.

활용 예제

GestureDetector(
	onTap: showDash,
    child: FocusableActionDetector(
    	onShowHoverHightlight: onHover,
        onShowFocusHightlight: onFocus,
        actions: {MAP OF ACTIONS},
        shortcuts: {MAP OF SHOTRCUTS},
        child: <Button>
    ),
)