flutter 9

[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] 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 기본 문법

다트 기본적인 문법을 설치 없이 웹에서 실행이 가능하도록 지원한다. 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

[Flutter] 웹뷰 관련

Flutter 웹뷰 관련 부분 1. 콜백함수 : 일정 작업이 완료되면 실행되는 함수 => 함수를 정의 해두고 특정 조건이 성립 될때 사용된다. 앱에서 화면 상 예시를 들면 유저가 화면에 터치 했을때 실행할 함수나 웹뷰의 로딩이 완료됐을대 실행 함수를 넣을때사용한다. WebView( //웹뷰 생성 함수 onWebViewCreated: (WebViewController controller){ this.controller=controller; // 윗젯에 컨트롤러 저장 }, // 웹뷰 추가하기 initialUrl: 'https://blog.codefactory.ai', javascriptMode: JavascriptMode.unrestricted, ), - 코드 팩토리의 플러터 프로그래밍 소스를 참조하였습니다..

Flutter 2023.06.17

[Flutter] 기본위젯

[Flutter] 기본위젯 자식을 하나만 갖는 위젯 자식을 하나만 갖는 대표적인 위젯 대체로 child 매개변수 입력 받는 항목 Container : - 자식을 담는 컨테이너 역할. - 배경색 , 너비와 높이, 테두리 등의 디자인 지정가능 GestureDetecotr 위젯 : - 플러터에서 제공하는 제스처 기능을 자식 위젯에서 인식하는 위젯 - 탭이나 드래그 그리고 더블 클릭 같은 제스처 기능이 자식 위젯에 인식 됐을때 함수를 실행 SizeBox 위젯 : - 높이와 너비를 지정하는 위젯 - Container 위젯과 다르게 디자인적 요소는 적용할 수 없고 Const 생성자로 선언할 수 있어서 퍼포먼스 측면에서 효율적 자식을 여러개 갖는 위젯 다수의 자식을 입력 받는 위젯의 경우에는 children 매개변수..

Flutter 2023.05.06