칠구의 블로그

이번에는 위의 사진처럼 특정 조건에 맞지 않으면 메시지를 반환하는 것을 form과 validator 사용하여 구현해보겠다. 나는 참고로 화면 이름으로 InquiryScreen 사용했다. final GlobalKey _formKey = GlobalKey(); 폼 함수를 사용하기 위해 글로벌 키 사용 @override Widget build(BuildContext context) { 이 코드 body안에 Form( key: _formKey, child: Column( children: [ InputField( label: '제목 *', onSaved: (value) { if (value != null) { //눌 체크 title = value; } }, ), SizedBox(height: 20), Input..

image_picker 를 이용해서 갤러리 (파일)에서 사진을 선택해서 업로드 하는 것을 구현해 보겠다. 1.pubspec.yaml 수정 먼저 pubspec.yaml에 dependencies: _MyAppState(); } class _MyAppState extends State { File? _image; // 이미지 담을 변수 final ImagePicker picker = ImagePicker(); //이미지 가져오기 Future getImage(ImageSource imageSource) async { final XFile? pickedFile = await picker.pickImage(source: imageSource); if (pickedFile != null) { setState(() {..

위의 화면처럼 하나의 InputField안에 label과 hintText 2개 이상 적용되도록 구현해 보았다. class InputField extends StatelessWidget { final String title; final List labels; //라벨 2개를 사용하기 위함 final List hintTexts; // 힌트텍 2개를 사용하기 위함 //이것도 중요요소 InputField( {required this.title, required this.labels, required this.hintTexts}); @override Widget build(BuildContext context) { return Column( crossAxisAlignment: CrossAxisAlignment.s..

이번엔 위 사진처럼 어플의 하단바와 바 클릭 시 화면 전환을 구현해 보겠다. BottomBar(하단 바) class BottomBar extends StatelessWidget { @override Widget build(BuildContext context) { return Container( color: Colors.grey, child: TabBar( indicatorSize: TabBarIndicatorSize.label, indicatorWeight: 4, labelColor: Colors.black, unselectedLabelColor: Colors.black38, labelStyle: TextStyle( fontSize: 17, ), tabs: [ Tab( icon: Icon( Icons...

닥트를 이용하여 위의 사진 처럼 구현해보려고 한다. 즉 검색바와 GridView 검색바 Padding( padding: const EdgeInsets.all(8.0), child: TextField( decoration: InputDecoration( hintText: '검색', icon: Icon(Icons.search), ), ), ) 나는 이코드를 사용했다. TextField-> 이 코드가 검색바를 만들어줬고 hintText: '검색'-> 이 부분이 검색하기 전에 보이는 텍스트 icon: Icon(Icons.search)-> 이게 돋보기(?) 아이콘 여기서 중요한 점은 hintText: '검색', icon: Icon(Icons.search) -> 이걸 사용하려면 decoration: InputDec..