본문 바로가기

Flutter

Flutter Stack Flutter Stack은 Widget을 겹쳐 놓을 수 있게 해주는 Widget 이다. 우선 다음 이미지를 먼저 보자 왼쪽은 Column으로 Text와 Icon을 넣은 경우이고 오른쪽은 Stack에 Text와 Icon을 넣은 경우이다. Stack의 경우는 포토샵의 레이어 처럼 여러 위젯을 겹쳐 놓을 수 있다. 아래는 위 이미지의 소스 이다. Icon은 font_awesome_flutter package를 이용했다. 기본 Icon을 이용해서 테스트 해봐도 된다. import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; void main() { runApp(const MyApp(.. 더보기
Flutter error - crossAxisAlignment != CrossAxisAlignment.baseline || textBaseline != null"textBaseline is required if you specify the crossAxisAlignment with CrossAxisAlignment.baseline" crossAxisAlignment != CrossAxisAlignment.baseline || textBaseline != null "textBaseline is required if you specify the crossAxisAlignment with CrossAxisAlignment.baseline" baseline 속성값을 적용하려는데 위와 같은 오류를 맞이 했다면 당황하지 말고 textBaseline 속성을 추가 하자. 원하는 대로 baseline이 정렬된 결과를 얻을 수 있을 것이다. Row( //수직축 관련 속성 crossAxisAlignment: CrossAxisAlignment.baseline, //CrossAxisAlignment.baseline 속성을 위해서는 꼭 필요한 속성이다. t.. 더보기
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.. 더보기
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.. 더보기
Flutter 화면 이동 Flutter에서의 Navigator를 통한 기본 화면이동에 대해서 알아보겠다. 일반적인 화면 이동 앱화면 안에서 다른 widget페이지로 이동하고 싶을 때에는 Material/Cupertino의 Navigator를 이용해서 이동하게 되는데 Navigator이용 방법은 다음과 같다. 이동 다음과 같이 코드를 넣는다. Navigator.push(context, MaterialPageRoute(builder:(context) =>이동할 페이지())) 복귀 다시 돌아올때는 Navigator.pop() 을 호출 한다. 또는 뒤로가기를 통해 되 돌아 갈 수 있다. 간단한 샘플 소스를 보면 다음과 같다. import 'package:flutter/material.dart'; void main() { //Materi.. 더보기
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),.. 더보기

티스토리툴바