티스토리

재밌는거🌈

검색하기

블로그 홈

재밌는거🌈

uraon.tistory.com/m

기획자의 다이어리

구독자: 3

방명록 방문하기

주요 글 목록

Flutter_23. Add Card, Cupertino, Picker Flutter 장점 중 하나가 바로, Material과 Cupertino를 동시에 사용할 수 있다는 점이다. Cupertino의 Picker를 오늘 정리하면서, 지난 포스팅에 만든 Add Card 코드를 조금 수정해보도록 하겠다. 2023.05.14 - [개발하기] - Flutter_22. CardList, Add Card, TextField, TextArea, Clear Button CupertinoPicker의 상세 내용은 아래 링크 참고 :) https://api.flutter.dev/flutter/cupertino/CupertinoPicker-class.html CupertinoPicker class - cupertino library - Dart API An iOS-styled picker. D.. 공감수 0 댓글수 0 2023. 5. 15.
Flutter_22. CardList, Add Card, TextField, TextArea, Clear Button 예~전 포스팅에 이어 Card List에 Card를 추가하는 화면을 구현해보도록 하겠다. 이전 내용은 아래 링크 참고! 2023.05.08 - [개발하기] - Flutter_15. List, Detail View, Message, Static 변수 2023.05.10 - [개발하기] - Flutter_18. DialogAlert, Slider Function, Size, List, Switch Figma, Function Check 1) 구현해야할 화면 체크 🌿 체크 항목 1) TextField : clear Button 2) TextArea : TextField + maxLines 3) Image 2) card_add.dart 파일에 AppBar와 Scaffold 칼라 설정 3) 변수 셋팅 이번 포스팅.. 공감수 0 댓글수 0 2023. 5. 14.
Flutter_21. FloatingActionButton, extend, Scaffold, body 이번 포스팅은 FloatingActionButton을 메모하려 한다. 2023.05.08 - [개발하기] - Flutter_14. Model, Class, List, Card, floatingActionButton Flutter_14. Model, Class, List, Card, floatingActionButton 오늘은 전에 만들던 코드에 카드 리스트 페이지를 추가해보려한다. 🌿 체크 항목 1) home.dart에서 appBar IconButton을 클릭하면, 카드 리스트 페이지로 이동한다. 2) 카드 리스트 페이지를 구현한다. 3) uraon.tistory.com https://api.flutter.dev/flutter/material/FloatingActionButton-class.html Fl.. 공감수 0 댓글수 0 2023. 5. 13.
Flutter_20. TextField with Button, keyboardType, FocusScope, SnackBar 이번 포스팅에서는 Button과 함께 사용하는 TextField를 메모해보려 한다. 버튼을 클릭하면, 입력한 값은 SnackBar로 출력해보겠다. 2023.05.02 - [개발하기] - Flutter_07. ScaffoldMessenger, SnackBar, Function Flutter_07. ScaffoldMessenger, SnackBar, Function 화면 하단에 앱 프로세스에 대한 간략한 메시지를 제공하는 SnackBar를 메모해보겠다. 자세한 내용은 아래 링크에서 확인! https://docs.flutter.dev/cookbook/design/snackbars Display a snackbar How to implement a snackba uraon.tistory.com TextFiel.. 공감수 0 댓글수 0 2023. 5. 12.
Flutter_19. TextField, TextEditingController, dispose, onSubmitted, obscureText 이번 포스팅에는 텍스트필드를 정리해보려 한다. TextField 관련 내용은 아래 링크 참고:) https://api.flutter.dev/flutter/material/TextField-class.html TextField class - material library - Dart API A Material Design text field. A text field lets the user enter text, either with hardware keyboard or with an onscreen keyboard. The text field calls the onChanged callback whenever the user changes the text in the field. If the user in.. 공감수 0 댓글수 0 2023. 5. 11.
Flutter_18. DialogAlert, Slider Function, Size, List, Switch 지난 포스팅에 이어 오늘도 Function 부분을 구현해보도록 하겠다. 코드를 다시 실행해보고, 해야할 체크 항목을 확인하자 :) 🌿 체크 항목 ✅ Detail Page에서만 Play 화면에 진입 가능, Detail Page에 출력중인 이미지를 Play 화면에 출력하여 사용 ✅ SwitchImageChange : 이미지 변경(작품/아티스트) ✅ SwitchImageSize : 이미지 사이즈 변경(작게/크게) & 스위치 Label 변경(Size-Max/Size-Min) ✅ SwitchImageShow : 이미지 출력 여부 설정(노출/비노출), 비노출일 경우 해당 영역 Color 표시, 노출일 경우에만 1번 가능 4) SliderSize : 이미지 사이즈를 6단계(0~5) 옵션으로 선택하여 조절 5) Sli.. 공감수 0 댓글수 0 2023. 5. 10.
Flutter_17. Switch Function, Image, SizedBox, Column(Figma) 지난 포스팅에 이어 오늘은 Function 부분을 구현해보도록 하겠다. 코드를 다시 실행해보고, 해야할 체크 항목을 확인하자 :) 2023.05.08 - [개발하기] - Flutter_16. Static, Message, Switch, Slider 🌿 체크 항목 ✅ Detail Page에서만 Play 화면에 진입 가능, Detail Page에 출력중인 이미지를 Play 화면에 출력하여 사용 1) SwitchImageChange : 이미지 변경(작품/아티스트) 2) SwitchImageSize : 이미지 사이즈 변경(작게/크게) & 스위치 Label 변경(Size-Max/Size-Min) 3) SwitchImageShow : 이미지 출력 여부 설정(노출/비노출), 비노출일 경우 해당 영역 Color 표시 .. 공감수 0 댓글수 0 2023. 5. 9.
Flutter_16. Static, Message, Switch, Slider 오늘은 카드 상세 페이지에서 FloatingActionButton을 클릭하면, "Play Image" 페이지로 이동하고, 해당 페이지에서 Swtich와 Slider를 사용한 기능을 복습해보려한다. 스위치와 슬라이더 관련 내용은 아래 링크 참고 :) 2023.05.06 - [개발하기] - Flutter_13. Stateful, Switch, setState, Button Flutter_13. Stateful, Switch, setState, Button 스위치는 스위치의 값을 알고 있을 전역 변수가 필요하다. 자세한 소개는 아래 링크 참고 :) https://api.flutter.dev/flutter/material/Switch-class.html Switch class - material library .. 공감수 0 댓글수 1 2023. 5. 8.
Flutter_15. List, Detail View, Message, Static 변수 이번에는 카드 리스트에서 카드를 클릭하면, 상세 페이지로 이동 하는 부분을 만들어 보려한다. 선택한 카드의 이미지, 타이틀, 내용 정보를 그대로 상세 페이지에 출력해보자 :) 객체가 없는 class static 변수 1) message.dart 파일 생성하고, 주고받을 정보 Static 정의 🌈 static 이란? → 어디에서든 사용할 수 있음! 인스턴스에 귀속되지 않고, 클래스 통째로 귀속이 되는것. 함수 또는 변수가 통째로 클래스에 귀속이 되는 것! 2) card_list.dart 파일에서, Card > onTap에 보내줄 정보 Message. 에 선택 정보 담기! 3) card_detail.dart 파일에서, body에 Message. 정보로 출력하기! 4) 저장하고, 목록 상세 화면 이동 확인 5.. 공감수 0 댓글수 0 2023. 5. 8.
Flutter_14. Model, Class, List, Card, floatingActionButton 오늘은 전에 만들던 코드에 카드 리스트 페이지를 추가해보려한다. 🌿 체크 항목 1) home.dart에서 appBar IconButton을 클릭하면, 카드 리스트 페이지로 이동한다. 2) 카드 리스트 페이지를 구현한다. 3) 화면에 떠있는 플로팅 버튼을 구현한다. 이전에 home.dart를 만들어 Drawer를 넣고, appBar에 IconButton을 추가했었다. Drawer는 ListView로 UserAccountsDrawerHeader와 ListTile를 셋팅하고, 홈메인 화면(이미지 스와이프)은 img_swipe.dart라는 별도 신규 파일에, body 코드를 통으로 분리하였다. 수업 시간에 배운거 꼼꼼히 복습중 :) 2023.05.05 - [개발하기] - Flutter_11. Drawer, Li.. 공감수 0 댓글수 0 2023. 5. 8.
Flutter_13. Stateful, Switch, setState, Button 스위치는 스위치의 값을 알고 있을 전역 변수가 필요하다. 자세한 소개는 아래 링크 참고 :) https://api.flutter.dev/flutter/material/Switch-class.html Switch class - material library - Dart API A Material Design switch. Used to toggle the on/off state of a single setting. The switch itself does not maintain any state. Instead, when the state of the switch changes, the widget calls the onChanged callback. Most widgets that use a switch.. 공감수 0 댓글수 0 2023. 5. 6.
Flutter_12. Package, Gesture, List, Image, Swipe, Button 지난 번 별도 파일로 body를 분리하였다. 이어서 홈화면을 만들어 보겠다. 파일은 img_swipe.dart 에 이어서 작업 할 예정이다. 2023.05.05 - [개발하기] - Flutter_11. Drawer, ListTitle, Navigator, body, class, Stateful Flutter_11. Drawer, ListTitle, Navigator, body, class, Stateful 오늘은 지난번 포스팅에 이어서 Drawer에 리스트를 만들고 페이지 이동을 시켜보도록 하겠다. 2023.05.04 - [개발하기] - Flutter_10. Drawer, AppBar IconButton Flutter_10. Drawer, AppBar IconButton 오늘은 AppBar에 IconBu.. 공감수 0 댓글수 0 2023. 5. 6.
Flutter_11. Drawer, ListTitle, Navigator, body, class, Stateful 오늘은 지난번 포스팅에 이어서 Drawer에 리스트를 만들고 페이지 이동을 시켜보도록 하겠다. 2023.05.04 - [개발하기] - Flutter_10. Drawer, AppBar IconButton Flutter_10. Drawer, AppBar IconButton 오늘은 AppBar에 IconButton을 넣고, 클릭시 Drawer를 열어보는 것을 메모하려한다. AppBar에 사용되는 IconButton은 위치에 따라 leading, actions로 나뉜다. 자세한 내용은 아래 링크 확인! :) https://api.flutter.dev/ uraon.tistory.com Routing, Drawer, ListView 1) 폴더 "page"에 파일 추가하고, main.dart 파일에 Routing 셋.. 공감수 0 댓글수 0 2023. 5. 5.
Flutter_10. Drawer, ListView, UserAccountsDrawerHeader, AppBar IconButton 오늘은 AppBar에 IconButton을 넣고, 클릭시 Drawer를 열어보는 것을 메모하려한다. AppBar에 사용되는 IconButton은 위치에 따라 leading, actions로 나뉜다. 자세한 내용은 아래 링크 확인! :) https://api.flutter.dev/flutter/material/AppBar-class.html AppBar class - material library - Dart API A Material Design app bar. An app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar. App bars typically expose one or.. 공감수 0 댓글수 0 2023. 5. 4.
Flutter_09.Navigator, Push, PushNamed, Pop Flutter_08번에서 만든 코드에 Button을 추가하고, Push로 이동하는 것을 추가해보겠다. [참고 : 2023.05.03 - [개발하기] - Flutter_08. AlertDialog, Navigator, Routing, PushNamed ] Navigator, Push 1) home.dart 파일에 GestureDetector를 Column으로 랩핑 2) Button 2개를 Row로 추가하고, 화면 정렬 3) 저장하고 화면 확인 4) Button에 Navigator.push(); 추가 context는 현재 화면을 저장하고, 추후 화면 이동 후 돌아올때 다시 보여줍니다. 5) route에 MaterialPageRoute(builder: ) 추가 return을 페이지1번 A로 넣어줍니다. 6) .. 공감수 0 댓글수 0 2023. 5. 3.
Flutter_08. AlertDialog, Navigator, Routing, PushNamed Flutter는 화면 간 탐색 및 딥 링크 처리를 위한 완전한 시스템을 제공한다고 한다. 내비게이션과 라우터를 이용한 화면 이동을 복습해보겠다 :) 자세한 내용 및 추가적인 레시피는 아래 링크에서 확인! https://docs.flutter.dev/ui/navigation Navigation and routing Overview of Flutter's navigation and routing features docs.flutter.dev https://docs.flutter.dev/cookbook#navigation Cookbook The Flutter cookbook provides recipes for many commonly performed tasks. docs.flutter.dev Gesture.. 공감수 0 댓글수 0 2023. 5. 3.
Flutter_07. ScaffoldMessenger, SnackBar, Function 화면 하단에 앱 프로세스에 대한 간략한 메시지를 제공하는 SnackBar를 메모해보겠다. 자세한 내용은 아래 링크에서 확인! https://docs.flutter.dev/cookbook/design/snackbars Display a snackbar How to implement a snackbar to display messages. docs.flutter.dev https://m2.material.io/components/snackbars#anatomy Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams .. 공감수 0 댓글수 0 2023. 5. 2.
Flutter_06. GestureDetector, onTap, AlertDialog 제스처를 감지하는 위젯 "GestureDetector"를 사용한 AlertDialog 출력을 메모해보겠다. 자세한 내용은 아래 링크에서 확인! https://api.flutter.dev/flutter/widgets/GestureDetector-class.html GestureDetector class - widgets library - Dart API A widget that detects gestures. Attempts to recognize gestures that correspond to its non-null callbacks. If this widget has a child, it defers to that child for its sizing behavior. If it does not ha.. 공감수 0 댓글수 0 2023. 5. 2.
Flutter_05. Button, Link, launchUrl, Plugins 오늘은 Flutter_01~03에서 만든 프로필 페이지 버튼에 링크를 걸어보겠다. 수업 시간에 알게된 pub.dev에서 검색해보았다 :) Plugin for launching a URL 1) pub.dev에서 검색 - https://pub.dev접속 - url 검색 : "url_launcher" 클릭 ❊ URL라운처 = URL을 시작하기 위한 Flutter 플러그인! 2) 복사 url_launcher: ^6.1.10 3) pubspec.yaml 파일에 붙여넣고 저장 4) 이제 Dart 코드에 url_launcher 사용 가능 import 'package:url_launcher/url_launcher.dart'; Url, async Function 1) Url을 담을 final 변수 선언 final Uri.. 공감수 0 댓글수 0 2023. 4. 29.
Flutter_04. Button 다양한 버튼을 사용할 수 있다. 가장 기본적인 TextButton을 입력하면 다음과 같이 출력된다. 쉽게 생각하면, onPressed는 버튼 클릭 시 출력되는 이벤트가 정의되는 부분이고, child는 버튼명을 넣는다고 생각하면 된다. #스타일 : styleFrom()을 사용하여 스타일 설정 가능 style: TextButton.styleFrom() #별도 Function을 만들어서 버튼 클릭 이벤트 구현 가능 // -- Function ---- longClickAction() { String action = "long clicked"; print('text button is $action.'); } TextButton TextButton( style: TextButton.styleFrom(foregrou.. 공감수 0 댓글수 0 2023. 4. 27.
Flutter_03. CircleAvatar, Divider, Button 오늘은 지난 시간에 이어서 image 1개를 CircleAvatar로 넣고, Divider 및 Button을 추가해보겠다. body : CircleAvatar, Divider 0) 지난 시간에 만든 코드 VSCode로 열고 확인 1) Column에 CircleAvatar 추가하기 - 이미지 설정 : backgroundImage: AssetImage("폴더명/이미지명.확장자") - Radius 값 설정하기 const CircleAvatar( backgroundImage: AssetImage('images/ura.jpg'), radius: 70, ), 2) CircleAvatar에 Padding 추가 3) 문구 아래에 Divider 추가하고 화면 확인 const Divider( height: 30, colo.. 공감수 0 댓글수 0 2023. 4. 24.
Flutter_02. Column(Image), ScrollView, Padding, Row 오늘은 지난 시간에 이어서 Column에 이미지와 버튼을 추가하고, 화면을 스크롤하여 볼수 있는 ScrollView를 넣어보았다. 지난 시간에 알게 된 것들을 활용하여, 화면에 문구와 이미지를 넣고, 잘 정렬하여 꾸며보려고 한다. 여기에 버튼을 추가하고, 링크로 개인 SNS 연결하여 프로필 페이지처럼 만들어보면 재미있을 것 같다. 우선은 이미지 넣고 스크롤하는 것까지 해보겠다 :) [참고] 나만의 프로필 링크 만들기 - HTML, CSS 기초로 프로필 만들어 깃배포하기! 🌈 https://ura257.github.io/myPage/ body : Column(image), ScrollView 0) 지난 시간에 만든 코드 VSCode로 열고 확인 1) Column에 이미지 추가 - images 폴더에 이미지.. 공감수 0 댓글수 0 2023. 4. 16.
Flutter_01. 시작 플러터(Flutter)는 '오픈 소스 크로스 플랫폼 GUI 애플리케이션 프레임워크'이다. 안드로이드(material)와 iOS(cupertino)의 디자인을 모두 지원하며, 별도의 코딩 없이도 디바이스별 사이즈 자동 맞춤이 가능하다. 즉, 사용자(End-User)에게 동일한 UIUX 서비스를 제공할 수 있다는 엄청난 장점을 가지고 있는 것이다. 🌿 적은 인원으로 짧은 시간 내에 빠르게 개발 결과물을 만들어 낼 수 있으며, 퍼포먼스(속도)도 네이티브와 근접할 정도로 훌륭하다고 한다. Web, AOS, iOS를 모두 만들 수 있고, 수정 화면 확인이 빠르며, 구글이 너무 잘 만들어나서 코딩이 엄~청 쉽다고 한다 ㅋ 그래서! 나는 주말에 플러터를 배우기 시작했다 :) 그리고!! 배운 것을 여기에 메모하기로 결.. 공감수 0 댓글수 1 2023. 4. 13.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.