재밌는거🌈

이전에 올렸던 사이트 목록 중, Webflow라는 사이트가 있었다. 바로 노코드 구축! 쪼꼼 바빴던 요즘~ 다시 워밍업을 하기 위해 이것저것 둘러보다가, 궁금했던 Webflow를 둘러보기로 결심! 오늘 무료 회원가입했다. :) Figma와 비슷한 느낌! 무료는 한 2판정도 사용할 수 있는거 같다. 2023.03.02 - [기획하기] - 알아두면 좋은 사이트 목록 https://webflow.com/ Webflow: Create a custom website | No-code website builder Create professional, custom websites in a completely visual canvas with no code. Learn how to create a website by ..

이번에는 카드 리스트에서 카드를 클릭하면, 상세 페이지로 이동 하는 부분을 만들어 보려한다. 선택한 카드의 이미지, 타이틀, 내용 정보를 그대로 상세 페이지에 출력해보자 :) 객체가 없는 class static 변수 1) message.dart 파일 생성하고, 주고받을 정보 Static 정의 🌈 static 이란? → 어디에서든 사용할 수 있음! 인스턴스에 귀속되지 않고, 클래스 통째로 귀속이 되는것. 함수 또는 변수가 통째로 클래스에 귀속이 되는 것! 2) card_list.dart 파일에서, Card > onTap에 보내줄 정보 Message. 에 선택 정보 담기! 3) card_detail.dart 파일에서, body에 Message. 정보로 출력하기! 4) 저장하고, 목록 상세 화면 이동 확인 5..

스위치는 스위치의 값을 알고 있을 전역 변수가 필요하다. 자세한 소개는 아래 링크 참고 :) 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..

오늘은 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..

화면 하단에 앱 프로세스에 대한 간략한 메시지를 제공하는 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 ..

제스처를 감지하는 위젯 "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..

오늘은 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..

다양한 버튼을 사용할 수 있다. 가장 기본적인 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..

오늘은 지난 시간에 이어서 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..