본문 바로가기
반응형

Mobile Develop33

[Flutter] Stack 위젯 Stack stack은 가장 먼저 들어온 객체가 가장 아래에 쌓이는 구조이다. stack 위젯 역시 children에 나열한 여러 위젯을 순서대로 겹치게 한다. children 프로퍼티에 정의한 순서대로 쌓이기 때문에, 가장 먼저 정의한 자식 위젯이 가장 아래에 놓인다. Stack( children: [ Container( color: Colors.red, width: 100, height: 100, margin: const EdgeInsets.all(8.0) ), Container( color: Colors.green, width: 80, height: 80, margin: const EdgeInsets.all(8.0) ), Container( color: Colors.blue, width: 60, h.. 2022. 3. 17.
[Flutter] 화면에 가득 차도록 위젯 사이즈 full로 설정하기 위젯은 기본적으로 자식 위젯만큼의 크기를 가진다. 플러터에는 사이즈 설정 속성이 없는 위젯이 많기 때문에, 화면에 꽉 차게 설정하기 위해서는 사이즈 설정 속성이 있는 위젯을 이용하여 세팅해 줄 수 있다. SizedBox나 Container와 같이 사이즈를 설정할 수 있는 위젯의 크기를 double.infinity 로 설정한 뒤, 기본 위젯을 자식으로 설정해준다. SizedBox( width: double.infinity,//가로 꽉 차게 설정 height: double.infinity,//세로 꽉 차게 설정 child: Container(//꽉 채우고자하는 위젯 //생략 ) ) 백그라운드 색을 노란색으로 설정하고 비교해보면 화면이 가득 채워지는 것을 확인 할 수 있다. [설정 전] [설정 후] [전체 코.. 2022. 3. 17.
[Flutter] 레이아웃 위젯 백그라운드 색상 채우기 Row나 Column과 같은 위젯에는 백그라운드 색상을 채우기 위한 속성이 존재하지 않는다. 따라서 다음과 같이 위젯을 Container 혹은 ColoredBox로 감싼 뒤 색상을 설정해줄 수 있다. Container(//ColoredBox도 가능 color: Colors.yellow, // 여기에 설정하는 색이 백그라운드 색 child: Row(...), // 기본 위젯을 자식으로 설정 ) [실행 결과] [전체 코드] import 'package:flutter/material.dart'; //앱 시작 부분 void main() { runApp(const MyApp()); } //시작 클래스. 머티리얼 디자인 앱 생성 class MyApp extends StatelessWidget { const MyAp.. 2022. 3. 17.
[Flutter] MainAxis와 CrossAxis Axis Row, Column과 같이 방향성이 있는 위젯은 mainAxis와 crossAxis에 관한 프로퍼티가 존재한다. mainAxis는 위젯의 기본 방향에 대한 속성이고, crossAxis는 반대방향에 대한 속성이다. 다시 말해, 기본 수직으로 정렬되는 Column은 세로가 mainAxis, 가로가 crossAxis가 되며 기본 수평으로 정렬되는 Row는 가로가 mainAxis, 세로가 crossAxis가 된다. 이 내용을 그림으로 표현하면 아래와 같다. Axis 속성에는 mainAxisSize와 mainAxisAlignment, crossAxisAlignment를 지정할 수 있으며, 아래와 같이 속성에 정의한다. Row( mainAxisSize: MainAxisSize.min, mainAxisAl.. 2022. 3. 17.
[Flutter] Container, Column, Row 위젯 플러터에서는 기본으로 제공되는 다양한 위젯을 조합하여 다양한 화면을 그릴 수 있다. 특히 children 프로퍼티를 사용하여 또 다른 위젯을 자식으로 가질 수 있는데, 다음과 같이 사용할 수 있다. 예) Column( children: [ [위젯], [위젯], [위젯], ], ), Container Container은 아무것도 없는 위젯으로, 다양한 프로퍼티를 가지고 있기 때문에 사용하기에 따라서 다양한 응용이 가능하다. 가로와 세로의 길이, 색, 안쪽 여백(padding), 바깥쪽 여백(margin) 등을 설정할 수 있다. Container( color: Colors.red, width: 100, height: 100, padding: const EdgeInsets.all(8.0), margin: co.. 2022. 3. 17.
[Flutter] 버튼 클릭 시 글자 변경되는 간단한 소스 상태가 변화하는 화면이므로 StatefulWidget을 사용하여 코드를 작성해주어야한다. 아래는 하단의 FloatingActionButton을 클릭하면 글자 Hello가 World로 변경되는 예제이다. import 'package:flutter/material.dart'; //앱 시작 부분 void main() { runApp(const MyApp()); } //시작 클래스. 머티리얼 디자인 앱 생성 class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', t.. 2022. 3. 16.
[Flutter] Hello World 정적 페이지 소스 텍스트만 출력하면 되는 정적인 화면을 가지므로 StatelessWidget을 사용한다. import 'package:flutter/material.dart'; //앱 시작 부분 void main() { runApp(const MyApp()); } //시작 클래스. 머티리얼 디자인 앱 생성 class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage.. 2022. 3. 16.
[Dart] 주석과 문장 주석 주석을 사용하는 방법은 아래와 같이 3가지이다. //한줄 주석 /* * 여러줄 주석 */ ///문서 주석 ///를 메서드나 클래스 정의 위에 작성하면 dartdoc와 같은 문서 생성 도구를 통해 문서를 자동으로 생성해준다. 문장 문장은 명령 단위로, 끝은 세미콜론(;)으로 표시한다. void main(){ print("Hello Dart!"); } 주석과 문장 void main(){ //안녕하세요 출력 print("안녕하세요"); } 위의 코드를 출력하면 아래와 같다. 2022. 1. 4.
[Flutter] 온라인에서 Dart / Flutter 실행하기 아래 URL로 접속 코드를 작성한 뒤 Run을 클릭하면 실행내용이 Console에 출력된다. https://dartpad.dev DartPad dartpad.dev New pad를 클릭하여 Dart와 Flutter 중 어떤 코드를 실행할 지 선택 가능하다. 이 밖에도 자동으로 Format을 정리(자동으로 라인 정리)해주는 기능을 제공한다. 2022. 1. 4.
반응형

티스토리툴바