본문 바로가기

개발40

Flutter Column/Row Flutter Column에 대해서 알아보자 UI 작업을 해보았다면 알수 있겠지만 나의 경우는 화면에 UI를 그려줄때에 겹쳐그리기인 경우를 제외하고는 가장 많이 그리는 방식이 가로로 차례대로 그리기 세로로 차례대로 그리기 이다. 이는 쓸때없이 UI depth를 만들기도 하지만 균형있게 화면에 widget을 배치하는데 효율적이다. Column flutter에서 세로 배치로 쓰이는 Column을 이용하여 Text Widget을 그려보면 다음과 같이 그릴 수 있다. (상단의 Column이라는 Text의 Widget은 appBar이다.) 아래 내용을 그대로 flutter 프로젝트에 복사해서 실행해보면 위와 같은 그림이 나온다. import 'package:flutter/material.dart'; void ma.. 2022. 4. 19.
Flutter Text Widget Flutter를 이용하면서 가장 많이 사용하게 될 Text에 대해서 알아보자. https://api.flutter.dev/flutter/widgets/Text-class.html Text class - widgets library - Dart API A run of text with a single style. The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints. The style argument is optional. Whe a.. 2022. 4. 18.
Flutter 화면 이동 Flutter에서의 Navigator를 통한 기본 화면이동에 대해서 알아보겠다. 일반적인 화면 이동 앱화면 안에서 다른 widget페이지로 이동하고 싶을 때에는 Material/Cupertino의 Navigator를 이용해서 이동하게 되는데 Navigator이용 방법은 다음과 같다. 이동 다음과 같이 코드를 넣는다. Navigator.push(context, MaterialPageRoute(builder:(context) =>이동할 페이지())) 복귀 다시 돌아올때는 Navigator.pop() 을 호출 한다. 또는 뒤로가기를 통해 되 돌아 갈 수 있다. 간단한 샘플 소스를 보면 다음과 같다. import 'package:flutter/material.dart'; void main() { //Materi.. 2022. 4. 18.
Flutter ListView Flutter의 List ListView라고 하면 일반적으로 같은 모양을 하고 있는 Widget 아이템들의 집합으로 가로 혹은 세로로 스크롤이 가능한 오브젝트를 얘기한다. 다음 이미지 처럼 말이다. 가장 간단하게 만드는 방법은 ListView를 선언하고 children으로 widget들을 정의 하는 것이다. ListView( children: const [ Text('01 data', style: TextStyle(fontSize: 20),), Text('02 data', style: TextStyle(fontSize: 20),), Text('03 data', style: TextStyle(fontSize: 20),), Text('04 data', style: TextStyle(fontSize: 20),.. 2022. 4. 8.
Flutter http 패키지와 api 통신 하기 Flutter에서는 어떻게 http 통신을 할까? flutter 패키지인 http를 이용해서 api 통신을 하는 예를 알아보자. https://pub.dev/packages/http http | Dart Package A composable, multi-platform, Future-based API for HTTP requests. pub.dev 환경설정 pubspec.yaml 파일에 http package를 등록해 주자. http: ^0.13.4 http의 get/post function을 사용하기 위해서는 http package의 import가 필요하다. import 'package:http/http.dart'; or // as http의 경우는 function을 호출할때 // http라고 앞에 붙.. 2022. 4. 7.
Flutter Json to model https://javiercbk.github.io/json_to_dart/ JSON to Dart JSON to Dart Paste your JSON in the textarea below, click convert and get your Dart classes for free. Handcrafted by Javier Lecuona Github json_to_dart Code Twitter javiercbk.github.io Flutter에서 api 통신하고 나서 결과 값으로 받는 json을 객체로 만들기 위해 json raw data를 class(모델)로 만드는 방법에 대해서 알아보자. JSON data json이 다음과 같은 형식으로 존재 한다면 해당 json을 잘 복사하자. { "page":1, ".. 2022. 4. 7.

티스토리툴바