728x90

Coding/Flutter 4

[Flutter/플러터 공부] 시작 화면 간단히 만들기

간단히 시작화면을 구현해보고자 합니다. 이미지와 제목 텍스트 그리고 버튼으로 화면 이동이 가능하게 만들어 보겠습니다. 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..

Coding/Flutter 2023.08.17

[Flutter/플러터 공부] 외부 라이브러리 사용하기

플러터 역시 다양한 라이브러리를 활용하여 앱을 풍성하게 개발할 수 있습니다. 간단히 적용하여 실행하는 방법을 알아보도록 하겠습니다. 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" 를 활용하도록 하겠습니다. 검색을 통해 패키..

Coding/Flutter 2023.08.15

[Flutter/플러터] Column 과 Row 로 간단한 컨테이너 레이아웃

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..

Coding/Flutter 2023.08.13

[Flutter/플러터 공부] 컨테이너 위젯 만들고 간단히 꾸미기

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

Coding/Flutter 2023.08.13
728x90