본문 바로가기

Flutter8

[Flutter] (8) Stack(), Center(), PageView 위젯 사용하기 Stack() 위젯 사용하기 Stack위젯은 기본적으로 위젯들을 겹쳐서 UI에 출력할 때 사용하는 위젯이다. Stack 위젯은 Column이나 Row위젯과 비슷한하게 children을 가지며, 그 children안에 들어있는 위젯들을 겹쳐서 출력하게 된다. 아래 코드는 Stack을 사용한 매우 간단한 예시이다. body: Stack( children: [ Container( width: 400, height: 400, color: const Color.fromARGB(255, 221, 24, 24), ), Container( width: 200, height: 200, color: Color.fromARGB(255, 12, 66, 229), ) ], ), 위의 코드대로 출력된 모습을 확인해보면 두개의 C.. 2023. 7. 13.
[Flutter] (7) GridView, 문자열 내 코드 실행, 삼항연산자 사용하기 작은 프로젝트를 하나 진행하다가 GridView를 사용해야하는 상황이 생겨서, 이번 글을 통해 GridView 사용법을 알아보려고 한다. 우선 GridView란 다음과 같이 한 화면 안에 여러가지 위젯을 패턴 (주로 가로 세로에 일정한 간격으로 위치함)에 맞춰서 배치할 때 사용한다. 위 이미지는 아래와 같은 코드를 사용해서 만들었다. GridView 사용하기 body: GridView.builder( itemCount: 20, gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 5, childAspectRatio: 1, mainAxisSpacing: 20, crossAxisSpacing: 20, ), itemBuilder: (.. 2023. 7. 11.
[Flutter] (6) Open Source Package (오픈소스 패키지): url_launcher, Screen Util 사용하기 지난번 글까지는 Flutter 내부에 있는 위젯과 함수들을 사용하여 UI 디자인을 시작해보았다. [Flutter] (5) MediaQuery, LayoutBuilder, OrienataionBuilder 사용하기 지난번 글에서는 Flutter을 이용하여 기본적인 프론트엔드 디자인을 하는 방법을 알아보았다. [Flutter] (4) 프론트엔드 디자인 하기 (Front-end Design) 지난번 글에서 Flutter의 기본 구조에 대해서 알아보 hwanho-log.tistory.com 이번 글에서는 Flutter 외부에 있는 Open Source Package를 사용하여 Flutter의 더 다양한 기능들을 편리하게 구현해볼 것이다. Open Source Package란? Open Source Package.. 2023. 7. 10.
[Flutter] (5) MediaQuery, LayoutBuilder, OrienataionBuilder 사용하기 & 적응형 페이지 (Adaptive Layout) vs. 반응형 페이지 (Responsive User Interface) 지난번 글에서는 Flutter을 이용하여 기본적인 프론트엔드 디자인을 하는 방법을 알아보았다. [Flutter] (4) 프론트엔드 디자인 하기 (Front-end Design) 지난번 글에서 Flutter의 기본 구조에 대해서 알아보았다. [Flutter] (3) Dart의 기본 구조 알아보기 [Flutter] (2) 애뮬리이터 설치하기, 앱 빌드 및 웹 빌드 이번 글에서는 Flutter에서 개발한 코드를 안드 hwanho-log.tistory.com 하지만 글 마지막 부분에서 나는 고정된 숫자 사이즈의 한계를 느낄 수 있었다. Container의 사이즈를 숫자로 특정하여서 입력을 하게되니 화면의 사이즈가 바뀌었을 때 동적으로 반응을 하지 못하고 UI에러가 발생하는 것을 확인 할 수 있었다. 이를 해결하.. 2023. 7. 10.

티스토리툴바