간단히 시작화면을 구현해보고자 합니다. 이미지와 제목 텍스트 그리고 버튼으로 화면 이동이 가능하게 만들어 보겠습니다. StartScreen.dart 파일 별도로 만들기 메인 다트 파일에 커스텀 위젯 StartScreen 을 만들어보겠습니다. 그리고 커스텀 위젯에서 화면 구성을 하도록 하겠습니다. StartScreen() 위젯은 별도 파일인 /lib/start_screen.dart/ 에 만들겠습니다. import 'package:flutter/material.dart'; import 'package:quiz_03/start_screen.dart'; void main() { runApp( MaterialApp( home: Scaffold( body: Container( decoration: BoxDecora..

플러터 역시 다양한 라이브러리를 활용하여 앱을 풍성하게 개발할 수 있습니다. 간단히 적용하여 실행하는 방법을 알아보도록 하겠습니다. pub.dev 사이트에서 라이브러리 활용하기 pub.dev 사이트에 접속하면 다양한 라이브러리를 볼 수가 있습니다. 패키지별로 그룹화하여 제공하기도 하고 검색도 할 수 있습니다. https://pub.dev/ Dart packages Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter and general Dart programs. pub.dev 저는 "English_words" 를 활용하도록 하겠습니다. 검색을 통해 패키..

Column & Row 배치 및 정렬하기 Column 은 세로로 배치하는 위젯을 말합니다. Container 를 3개 만들고 Column 으로 감싸주었습니다. 기본적으로 아래와 같이 배치가 됩니다. import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Column'), ), body: TestColumn(), //별도의 클래스를 body 에 만들어서 테스트합니다. ), ), ); } class TestColumn extends StatelessWidget { const TestColumn({super.key}); @override Widget b..

이제 플러터 공부해보고자 하는 초보가 하고 배운 것 하나씩 적어보려고 합니다. 틀린 부분도 있을 수 있으니 유념하여 봐주세요. Container 간단히 꾸미는 정도의 내용이라 별도의 CustomContainer 로 Class 를 만들어 진행해봤습니다. MaterialApp 과 Scaffold MaterialApp은 Material Design을 사용할 수 있게 하는 클래스입니다. 많은 파라미터 중에서 필수적인 것은 home(widget)입니다. home은 app을 실행할 때 가장 먼저 나오는 페이지(위젯)입니다. 또한 MaterialApp() 클래스를 사용하게 되면 Scaffold 를 사용할 수 있는데 화면을 구성하는 뼈대 형태라고 이해할 만합니다. 화면 구성에 들어가는 위젯들과 요소들을 감싸는 레이아웃..

플러터로 뭐라도 하려면 개발 환경을 만들어야 하니 아래와 같이 설치해보자, 참고로 M1 맥북 기준. 설치를 해서 코드를 넣긴 하지만 이게 온전히 깔끔하게 설치가 되었는지는 아직도 모르겠다. ^^;; 1. flutter SDK 다운로드 운영 체제별 다운로드 Install Install Flutter and get started. Downloads available for Windows, macOS, Linux, and ChromeOS operating systems. docs.flutter.dev zip 파일을 다운받으면 바로 압축을 풀어준다. 압축을 풀면 flutter 폴더가 생긴다. 이 폴더도 사실 아무곳에 넣어도 상관없는데 내 경우에는 USER/사용자이름/ 이 경로에 압축을 풀었다. 2. 안드로이드 ..