본문 바로가기

Widget6

Flutter 이벤트, 애니메이션 위젯 정리 요약 : GestureDetector, InkWell, Hero, AnimatedContainer, SliverAppBar/SliverFillRemaining/SliverList GestureDetector, InkWell - 텍스트나 이미지 등 이벤트효과 없는 위젯을 감싸서 onTap 등의 이벤트를 줄 수 있다. Hero - 화면 전환시 자연스럽게 연결되게 하는 애니메이션 위젯 (이미지 클릭하면 상세화면 보여줄 때 사용) - 두 페이지를 Hero위젯으로 연결 - tag를 동일하게 사용해서 연결시켜줌 class _MyHomePageState extends State { var _selectedTime; @override Widget build(BuildContext context) { return Sca.. 2021. 8. 23.
Flutter 다이얼로그 위젯 정리 사용자의 확인을 요구하거나 팝업메시지 등을 표시해주고 싶을 때 사용하는 다이얼로그 위젯에 대해 정리해보자. 요약 : AlertDialog, DatePicker, TimePicker AlertDialog - title : 제목 영역 - content : 내용 영역 - SingleChildScrollView, ListBody를 이용하면 스크롤 동작 가능 - action 프로퍼티에는 버튼 적용 - Navigator.of(context).pop() : 다이얼로그 닫기 class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget... 2021. 8. 23.
Flutter 입력 관련 위젯 글자, 체크박스, 스위치, 라디오, 드롭다운 등 여러가지 입력에 대한 위젯을 정리해보자. 요약 : TextField, CheckBox, Switch, Radio/RidioListTile, DropDownButton, TextEditingController, Form, TextFormField TextField return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Column( children: [ Spacer(), TextField(), // 그냥 밑줄 Spacer(), TextField( decoration: InputDecoration( labelText: 'Input Text' // 입력 힌트 ), ), Spacer(), Text.. 2021. 8. 23.
Flutter 크기/위치/정렬 관련 위젯 화면을 구성한 위젯의 크기, 위치, 정렬 등을 할 때 쓰이는 위젯에 대해 알아보자. 요약 : Center, Expanded, SizedBox, Card Center return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Container( color: Colors.blue, width: 200, height: 200 ) ) ); Expanded return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Column( children: [ Expanded( flex: 3, // 비율 child: Container( color: Colors.pinkA.. 2021. 8. 23.
Flutter - View, Bar 위젯 Flutter로 앱개발을 하기 위해선 화면에 보여지는 위젯들을 입맛에 맞게 잘 구현할 줄 알아야 한다. 자주 사용되는 위젯을 정리해 보자. 요약 : SingleChildScrollView, ListView, GridView, PageView, AppBar/TabBar/TabBarView, BottomNavigationBar SingleChildScrollView Column 또는 ListBody를 이용해 위젯을 아래로 쭉 나열하다 보면 화면 크기를 넘어갈 때가 있다. 이 때 스크롤이 필요한데, SingleChildScrollView를 사용해보자 class _MyHomePageState extends State { static const TextStyle optionStyle = TextStyle(font.. 2021. 8. 23.
Flutter 버튼 관련 위젯 버튼 위젯은 onPressed 프로퍼티를 꼭 추가하여 클릭했을 때 실행될 함수를 반드시 정해줘야 한다. RaisedButton, FlatButton, IconButton, FloatingActionButton return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Column( children: [ RaisedButton( // 입체감을 가진 버튼 child: Text('RaisedButton', style: TextStyle(color: Colors.blue)), color: Colors.amber, onPressed: () {} // 클릭시 실행할 영역 ), FlatButton( // 평평한 버튼 child: Text('FlatBut.. 2020. 5. 15.

티스토리툴바