본문 바로가기
반응형

Mobile Develop/Flutter21

[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.
[Flutter] Android Studio 에뮬레이터 세팅하기 안드로이드 스튜디오를 설치하고 아래 [실행버튼]을 누르거나 Ctrl+F5를 입력하면 프로그램이 실행된다. 하지만 이런 에러 메시지가 뜰 수도 있는데, 안드로이드 스튜디오는 프로그램이 실행될 디바이스를 필요로 하기 때문이다. No connected devices found; please connect a device, or see flutter.dev/setup for getting started instructions. 실제 기기를 연결하여 프로그램을 실행시켜도 되지만, 아래와 같이 에뮬레이터라는 가상 기기를 통하여 프로그램을 실행시켜 볼 수 있다. 에뮬레이터 세팅하기 1. AVD Manager 클릭 2. Create Virtual Device 클릭 3. 만들고자 하는 에뮬레이터의 가상 하드웨어 속성 설.. 2021. 12. 14.
[Flutter] New Flutter Project 생성하기 1. [File] > [New] > [New Flutter Project] 클릭 2. 프로젝트 타입을 플러터로 선택한 뒤 Flutter SDK path 옆에 ... 버튼 클릭 3. 기존 플러터를 설치했던 경로 지정 4. 경로 확인 후 Next 클릭 5. 생성하고자 하는 프로젝트 정보 설정 후 Finish 6. 생성 완료 2021. 12. 9.
[Flutter] Invalid module name 오류 해결 간단하게 플러터 프로젝트를 생성하려고 하는데 다음과 같은 에러메시지가 발생했다. Invalid module name: 'MemoMe' - must be a valid Dart package name (lower_case_with_underscores). 해석하면 Dart Package의 이름은 소문자와 _(언더바)만 사용 가능하다는 뜻이다. 따라서 프로젝트 이름에 대문자 M을 사용하여 발생한 에러였으므로 아래와 같이 프로젝트명을 변경하여 오류를 해결할 수 있다. 2021. 12. 8.
반응형

티스토리툴바