프론트엔드 개발자의 TIL #002

TIL #002

191104 월

 

---

오늘 배운 점

<Flutter>

1. 이 주의 위젯 공부 - SelectableText

• 앱 내의 텍스트를 선택시 드래그하여 다양한 옵션을 지원할 수 있다. 곧 개발할 예정인 텍스트 에디터에 활용될 위젯인 것 같아 미리 공부해보았다.

Widget SelectableText(
	'my text',
    onTap: () => print('단일 탭 제스처에 대한 반응');
    showCursor: true, //커서가 보이게 설정
    cursorWidth: 5,
    cursorColor: Colors.purple,
    cursorRadius: Radius.circular(5), //기타 다양한 커서 관련 디자인 가능
),

Widget SelectableText.rich( //RichText를 선택할 수 있다
	veryLongString,
    maxLines: 1,
    scrollPhysics: ClampingScrollPhysics(), //텍스트를 벗어나는 범위의 스크롤을 막는 기능
    toolbarOptions: ToolbarOptions(copy: true), //Editable Text에서 사용되는 기능
),

2. ToggleButton

• 다수의 버튼중 n개로 상태가 선택될 수 있도록 만든 위젯. 일반 버튼과 달리 선택 상태와 관련된 변수 및 함수가 필요하다.

List<bool> isSelected;

@override
void initState() {}

@override
Widget build(BuildContext context) {
	return Scaffold(
    appBar: AppBar(title: Text('ToggleButtons'),
    ),
    body: Center(
    	child: Column(
        	children: <Widget>[
            	ToggleButtons(
                fillColor: Colors.grey, //선택되지 않은 버튼 색
                selectedBorerColor: Colors.black,
                selectedColor: Colors.white, //선택된 버튼 색
                	children: <Widget> [//토글 버튼들
                    	Text('1'),
                        Text('2'),
                        Text('3'),
                    ],
                onPressed: (int index) { //클릭된 경우
                	setState(() {
                    for(int i = 0; i < isSelected.length; i++) {
                    	if(i == index) isSelected[i] = true;
                        else isSelected[i] = false;
                        //isSelected[i] = i == index; 로 대체 가능
                    }
                    });
                },
                isSelected: isSelected,
                ),
            ],
        ),
    ),
    );
}

3. ColorFiltered

• 자식 위젯에 color custom을 적용하는 위젯이다.

class _MyAppState extends State<MyApp> {
  static const title = 'Flutter ColorFilter Demo';
  var mode = BlendMode.dst;

  @override
  Widget build(BuildContext context) => MaterialApp(
        title: title,
        theme: ThemeData(primarySwatch: Colors.blue),
        home: ColorFiltered(
          colorFilter: ColorFilter.mode(Colors.red, mode),
          child: Scaffold(
            appBar: AppBar(title: Text(title)),
            body: Center(
              child: ListView(
                children: (List.from(BlendMode.values)..sort((a, b) => a.toString().compareTo(b.toString())))
                    .map(
                      (m) => ListTile(
                        title: Text(m.toString()),
                        selected: m == mode,
                        onTap: () => setState(() => mode = m),
                      ),
                    )
                    .toList(),
              ),
            ),
          ),
        ),
      );
}

* 플러터와 다트는 꾸준히 업데이트 되고 있다. iOS에서의 draggable scroll 지원, ML에 기반한 코드 자동완성 기능, Firebase에서 사용자 정보 삭제/텍스트 번역 등의 기능 추가 등등.. 역시 부지런한 구글 뚠뚠

https://medium.com/flutterpub/whats-new-in-flutter-1-9-26b3c518dd0

 

* 플러터가 12월 11일에 Flutter Interact를 발표할 예정이라고 한다. 현재는 거의 크로스 플랫폼 모바일 애플리케이션 개발에 사용되고 있는 sdk지만, 원래 구글이 목표한 대로 웹을 포함한 다양한 개발환경을 지원하는 날이 다가오는 것 같다.

https://events.google.com/flutter-interact/

 

---

내일 배울 것

<Flutter>

1. 텍스트 에디터 기능

• EditableText, RichText(정확히는 텍스트 스타일링 위젯이다), zefyr 등을 활용할 수 있음을 확인했다. 다만 zefyr는 공식적으로 Flutter팀에서 만든 것은 아니고, 현재 early preview 단계라 잔버그들이 있을 수 있으니 나머지로 구현할 방법을 우선적으로 찾아보기로 한다. https://pub.dev/packages/zefyr

/* EditableText 대략적인 사용 예시 */
return ListTile(
	title: Card(
    	child: Container( //위젯을 Container 등으로 감싸줘야 한다
        	child: EditableText(
            	textAlign: TextAlign.start,
                focusNode: _focusNode,
                controller: _TextEditingController, //컨트롤러 필수
                keyboardType: TextInputType.multiline,
                maxlines: 5, //디폴트값이 1이므로 여러줄의 에디터를 구현하려면 꼭 지정해줘야 한다
            ),
        ),
    ),
);

 

2. 관리자 모드를 어떤식으로 구현할지 찾아보는 중이다. 일단 이런 영상들로 실습해볼 예정이다.

https://www.youtube.com/watch?v=9P6Qe7fakD4

 

3. Firebase로 소셜 로그인 - 환경설정을 좀 더 꼼꼼히 체크하고 다시 실습 도전할 예정이다.

---

- 이 주의 위젯을 하나씩 리뷰해보는 것도 좋을 것 같다.

- 꾸준히 공부하는 건 어렵다8ㅅ8