분류 전체보기 106

[Flutter] Flutter 공부 tip 및 공식문서

[Flutter] Flutter 공부 tip 및 공식문서 전체적인 이해: 먼저 플러터의 기본 개념과 구성 요소에 대한 전반적인 이해를 위해 공식 문서의 "Get Started" 섹션부터 시작하세요. 이 섹션은 플러터를 처음 접하는 사람들에게 매우 유용합니다. Widget 카탈로그: 플러터는 다양한 위젯을 제공하며, 각 위젯은 특정 기능을 수행합니다. 플러터 공식 문서의 "Widget" 섹션에서 위젯 카탈로그를 확인하여 사용 가능한 모든 위젯과 각각의 기능을 알아보세요. 예제와 샘플 코드: 공식 문서에는 각 위젯에 대한 예제와 샘플 코드가 포함되어 있습니다. 이러한 코드를 읽고 실행하여 각 위젯의 동작과 사용법을 이해하세요. 레이아웃과 스타일링: 플러터에서 레이아웃과 스타일링은 매우 중요합니다. 공식 문서..

Flutter 2024.03.09

[Flutter] ValueNotifier로 상태 관리

=> ValueNotifier 상태 관리 참고 소스 ValueNotifier count = ValueNotifier(0); body: Column( children: [ TextField( controller: idController, //사용자에게 안내할 문구를 플래이스 홀더 형식처럼 표기할 수있다. decoration: InputDecoration(labelText: '아이디를 입력해주세요.'), ), ElevatedButton( onPressed: () { // //클릭시 동작구현 count.value=30; }, child: Text('아이디를 입력 값 가져오기'), ), ValueListenableBuilder(valueListenable: count, builder: (context, valu..

Flutter 2023.12.31

[Flutter] TextField 입력필드 위젯

//입력받는 부분을 구분하기 위해서사용 TextEditingController idController = TextEditingController(); body: Column( children: [ TextField( controller: idController, //사용자에게 안내할 문구를 플래이스 홀더 형식처럼 표기할 수있다. decoration: InputDecoration(labelText: '아이디를 입력해주세요.'), ), ElevatedButton( onPressed: () { //클릭시 동작구현 print(idController.text.toString()); }, child: Text('아이디를 입력 값 가져오기'), ), ], ),

Flutter 2023.12.31

[Flutter] ElevatedButton 위젯

ElevatedButton 클릭되었을때 행동할 행위를 구현해서 사용이가능하다. //버튼관련 body: Column( children: [ Container( margin: EdgeInsets.all(32), width: 200, height: 70, child: ElevatedButton( onPressed: () { // 클릭 했을때 동작하고 싶은 내용을 만든다. print('버튼이 클릭되었습니다.'); }, style: ElevatedButton.styleFrom( primary: Colors.green, onPrimary: Colors.yellow, elevation: 10//높이 z축에 약간의 그림자 형태를 가능하게한다. ), child: Text('눌러보세요')), ) ], ),

Flutter 2023.12.09

[Flutter] Text, Image, Icon 위젯

Text -> 스타일을 아래와같은 방법으로 넣을수있다. SizedBox( height: 300, width: 600, child: Text( '확인용사용합니다', style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold,fontSize: 30), ), ) image 사용시에 첫번째로 이미지가 담길 파일을 생성 하고 pubspec.yaml에 경로 추가해서 진행 - 무료아이콘 사이트 : https://www.flaticon.com/ Free Icons and Stickers - Millions of images to download Download Free Icons and Stickers for your projects. Images made by ..

Flutter 2023.12.09

[Flutter]Container, SizedBox 위젯 사용법

Command+. 누르면 소스 보기 줄임표로 변경가능 Container : 감싸는 역할 https://api.flutter.dev/flutter/widgets/Container-class.html Container( width: 300, height: 100, margin: EdgeInsets.all(32), //margin: EdgeInsets.only(left: 10,right: 10,top: 10,bottom: 10), //한쪽만 정렬하고싶은경우에만 사용 alignment: Alignment.center, //컨테이너 기준으로 정렬 child: Text('Container'), //color: Colors.blueAccent, decoration: BoxDecoration( borderRadius:..

Flutter 2023.12.09

[Flutter] Column, Row, Expanded 위젯

Column, Row, Expanded 위젯 Cmd+P => 파라미터 인자 값 어떤것 넣을 수 있는지 확인가능 Alt+enter ,Option+enter => 코멘트 뜨고 영역 관련된 부분 삭제할때 유용하다 Column 같은 경우 별도의 축이 있어서 어디에 정렬할지에 대한 내용을 정할 수있다 Column 세로로 정렬하는 위젯 Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('메인화면'),), body: Center( //child: Text('메인화면입니다.'), child: Column( //세로로 정렬하는 위젯 Column mainAxisAlignment: MainAxisAlignment.center, /..

Flutter 2023.12.09

[Flutter] 위젯 및 Route 및 단축키

터미널창에서 pub.dev 사이트에서 발견한 패키지를 다운로드 해서 사용하는방법 => flutter pub add image_compare_slider command+ . 누르면 소스코드 줄이기 (맥북) 안드로이드 스튜디오에서 => stless 입력시 stateless관련 자동생성 / stful 하면 반대로 자동생성 핫리로드 기능 => command+s 저장시 바로 된다. 안드로이드스튜디오 -> 인자값 확인 단축키 -> Command+P -> Ctrl+space자동완성기능으로정보 조회 Scaffold() //Material Design 스타일 앱을 개발할 때 기본적인 앱의 레이아웃구조를 만들고 //주요 기본 ui 요소를 제공하는 중요한 위젯 // 위젯이란 ? 앱의 화면에서 그려지는 앱의 모든 구성요소를 ..

Flutter 2023.11.25

Flutter 기본 문법

다트 기본적인 문법을 설치 없이 웹에서 실행이 가능하도록 지원한다. https://dartpad.dev/? DartPad dartpad.dev dynamic 사용 - 사용권장은 하지 않는 부분이지만 유용성을 위해서 알아두면 좋다정도이다. oid main(){ //print 함수 print('hello World'); //변수 자료형이 동일하지 않아도 사용이가능하다. //하지만 사용을 권장하지 않는다. //자료형이 추론해서 사용하기때문이다. dynamic car = 'benz'; car = 10; print(car); } Null Safety 사용부분 - 사용이유 : null을 허용해줌 null에게서 안전한 프로그램 코드를 작성하는 것을 의미한다. null safety를 사용하면 컴파일러에서 코드를 실행..

Flutter 2023.10.21