Flutter 앱 개발일지 검색 결과

해당 글 5건

Shazam 클론 코딩

목표 기능은 제외하고 주어진 화면 만들어 보기 이미지 작동 영상 사전 준비 주어진 코드 더보기 import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Shazam', theme: ThemeData( primarySwatch: Colors.blue, ), home..
Flutter 앱 개발일지 2023. 1. 9. 15:48

Flutter 가로 세로 정렬

Row 와 Column은 주축, 부축을 기준으로 정렬할 수 있다. 주축을 main axis, 부축을 cross axis 라고 합니다. 내부 요소들의 정렬은 MainAxisAlignment.center 와 같은 식으로 설정해준다. Alignment 방법들을 시각화하면 아래와 같다. 위와 같이 배치되어 있는 요소들을 같은 선상에 맞추려면, Row 의 CrossAxisAlignment 를 설정해주면 된다.
Flutter 앱 개발일지/Flutter(dart) 문법 2023. 1. 9. 15:30

Flutter 프로젝트 준비(Flutter 프로젝트 생성하기,VSCode Dart 세팅,Android Studio 설치,Android Studio 에뮬레이터 설치,VSCode에뮬레이터 실행하기)

Flutter 프로젝트 생성하기 1. Visual Studio Code(VSCode)를 실행. 2. View → Command Palette 버튼을 클릭. 💡 단축키 window : Ctrl + Shift + P macOS : Cmd + Shift + P 3. 명령어를 검색하는 팝업창이 뜨면, flutter라고 입력한 뒤 Flutter: New Project를 선택. 4. Application을 선택. 5. 프로젝트를 시작할 폴더를 선택하는 과정이다. 원하는 위치의 폴더를 선택한 뒤 Select a folder to create the project in 버튼을 클릭. 6. 원하는 프로젝트 이름을 입력 . 만약 중간에 아래와 같은 팝업이 뜬다면, 체크박스를 선택한 뒤 파란 버튼을 클릭. 7. 다음과 같이..
Flutter 앱 개발일지 2023. 1. 2. 03:52

Movie Reviews 만들기

목표 완성된 앱화면을 보고 똑같이 디자인 해보기 사전 준비 주어진 코드 더보기 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: HomePage(), // 홈페이지 보여주기 ); } } class HomePage extends StatelessWidget { const HomePage({Key..
Flutter 앱 개발일지 2022. 12. 31. 21:45