플러터

1. 페이지 생성 및 나가기웹 페이지와 flutter의 페이지 이동을 비교했을 때웹 페이지 : 웹페이지가 이동하면 덮어씌워진다.flutter : 페이지가 stack형식처럼 쌓인다.페이지 만들기Navigator.push( context, MaterialPageRoute(builder: (context) => Text('안녕')), );페이지 나가기Navigator.pop(context);페이지를 만들었으면 나가기가 있어야 한다. 버튼을 눌러 나가게 하는 것이 좋다.route 생성하기MaterialApp( initialRoute: '/', routes: { '/': (context) => Text('첫페이지'), '/detail': (context) => ..

웹에서 데이터를 받아왔을 때 제대로 받아왔는지 확인하고 싶다. 이럴 경우 어떻게 하는지 작성해보고자 한다.1. if문 사용하기데이터를 서버에서 가져와서 쓰는 경우)데이터가 없는데 보여주고자 하면 에러가 난다. 서버와 통신하는 시간이 좀 걸린다. 그래서 if문을 써서 변수 안에 데이터가 있는지 체크한다.if(data.isNotEmpty){ }else { return Text('로딩중'); }로딩중 대신 CircularProgressIndicator()등의 위젯을 사용하여 가독성있게 보여줄 수도 있다.return Center( child: SizedBox( width: 100, height: 100, child: Column( ..

flutter를 사용할 때 api를 호출하는 방법이 여러가지가 존재한다. 나는 그 중에서도 http와 dio에 대해서 글을 작성하고자 한다. 이 둘은 사용하기 편하다. 그런데 개인적으로 dio를 좀 더 선호하는 편이기는 하다. 아래에서 자세히 살펴보도록 하자. http https://pub.dev/packages/http http | Dart Package A composable, multi-platform, Future-based API for HTTP requests. pub.dev 1) 의존성 주입해서 설치하기 dependencies: http: ^1.1.0 pubspec.yaml 파일에 들어가서 종속성 부분을 찾아 http를 의존성을 주입하여 설치해준다. 2) import 해주기 import 'p..

플러터의 개발은 andriod studio에서 할 수 있다. 그러나 나는 개발을 vscode에서 많이 해서 이가 편하므로 이에 대해 글을 작성하고자 한다. 1. flutter 프로젝트 생성하기 vscode를 키고 명령 팔레트를 킨다. 만약 명령 팔레트가 어디 있는지 모른다면 vscode 왼쪽 하단에 톱니바퀴 모양이 존재한다. 이를 클릭하면 메뉴에 명령 팔레트를 클릭하면 된다. ctrl + shift + p 단축키를 클릭하면 된다. 명령 팔레트에 flutter라고 치면, 위의 사진같이 나온다. 플러터에 필요한 전제 조건들을 다 설치했다는 전제하에 Flutter: New Project를 클릭한다. 2. flutter template 선택하기 그러면 위와 같은 화면이 나오는데 여기서 Application을 클..

2023년 1월 25일 유튜브 Flutter 공식 채널에서 Flutter forward 2023이 진행되었다. Flutter는 3.7.0로, Dart는 3.0으로 업데이트가 되었다. Element Embedding의 개념 Flutter 콘텐츠를 모든 표준 웹에 추가할 수 있습니다. 이러한 방식으로 통합하면 Flutter는 단순히 웹 구성 요소로 전환되어 웹 DOM과 원활하게 통합되고 CSS 선택기 및 변환을 사용하여 부모 Flutter 개체의 스타일을 지정할 수도 있습니다. → 플러터에서 제공한 웹을 보았을 때, 웹에서 플러터앱을 사용할 수 있는 기능을 말한다. Element Embedding을 사용할 수 있는 웹 💫 https://flutter-forward-demos.web.app/#/ 위의 사이트는..

linkify 개념 : 텍스트 URL과 이메일을 Flutter용 텍스트의 클릭 가능한 인라인 링크로 바꿔준다. linkify 설치하기 pubspec.yaml파일에 들어가서 종속성에서 다음 항목을 추가해준다. 항상 말하지만 들여쓰기를 주의해야 한다. dependencies: flutter_linkify: ^5.0.2 사용하기 import 'package:flutter_linkify/flutter_linkify.dart'; Linkify( onOpen: (link) => print("Clicked ${link.url}!"), text: "Made by ", ); url_launcher 개념 : 브라우저/OS에서 링크를 열 수 있도록 도와준다. url_launcher 설치하기 dependencies: url_..

개념 충분한 패딩(들여쓰기)으로 자식(child)을 삽입하는 위젯이다. 예를 들어, 화면 상단의 상태표시줄, 노치, 카메라영역등이 존재하면 해당 영역을 포함하여 패딩처리를 수행 합니다. 최소 패딩이 지정된 경우에는 최소 패딩 또는 안전 영역 패딩 중 더 큰 패딩이 적용됩니다. 사용이유 아래의 왼쪽 사진처럼 ui를 제대로 보여지지 않는 경우가 생길 수 있다. 그럴 경우를 대비하여 safeArea로 감싸주는 것이다. 옵션 설명 위의 사진에 보면 SafeArea의 옵션들이 나와있다. key : key를 설정할 수 있다. top, bottom, right, left 에 boolean값으로 SafeArea를 개별적으로 설정할 수 있다. minimum : SafeArea를 지키기 위한 최소한의 padding을 설정..

텍스트 필드가 선택되고 input에 입력을 하게되면 focus, 즉 초점이 맞춰진다. 포커스 관리는 직관적인 흐름으로 양식을 만들기 위한 기본 도구입니다. 예를 들어 텍스트 필드가 있는 검색 화면이 있다고 가정합니다. 사용자가 검색 화면으로 이동할 때 검색어의 텍스트 필드에 포커스를 설정할 수 있습니다. 이를 통해 사용자는 텍스트 필드를 수동으로 누를 필요 없이 화면이 표시되는 즉시 입력을 시작할 수 있습니다. 표시되는 즉시 focus 주기 앱에서 텍스트 필드가 표시되자마자, focus를 주려면 이 autofocus속성을 사용해야 한다. TextField( autofocus: true, ); 버튼을 누를 때 focus 주기 1) FocusNode 생성하기 class MyCustomForm extends ..