본문 바로가기
반응형

Mobile Develop/Flutter20

[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.
[Flutter] Android Studio Plugins 설정 1. [File] > [Plugins] 클릭 2. flutter 검색 후 Install 클릭 3. 플러그인 개인정보 약관 수락 4. 다트 언어 설치 5. 플러터 플러그인 다운로드 6. 다운로드 완료 후 IDE 재시작 7. 세팅 완료 2021. 12. 8.
반응형

티스토리툴바