Flutter

Web Programming/Flutter&Dart

가로, 새로로 배치 하기 (Column과 Row)

1. 처음 코드 main.dart import 'package:flutter/material.dart'; import 'package:flutter_practice/pages/practice_page.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( home: const PracticePage(), ); } } practice_..

Web Programming/Flutter&Dart

상단 Bar달아 보기 (AppBar)

1. 파일 구조 파일 구조는 위와 같이 해놓았다 main.dart가 있고 pages안에 ***Page.dart로 해놓았다 2. 처음 코드 main.dart import 'package:flutter/material.dart'; import 'package:flutter_practice/pages/practicePage.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)..

Web Programming/Flutter&Dart

Flutter Font 적용 하기!!

1. 폰트 파일 넣기 폰트 파일(ttf)을 【assets/fonts/】에 넣어주도록 한다 2. pubspec.yml 설정 fonts: - family: CookieRun fonts: - asset: assets/fonts/CookieRun-Regular.ttf 이렇게 잘 넣어주도록 한다 family는 별칭이 될 것이다 3. theme 코드 작성 theme: ThemeData(fontFamily: "CookieRun"), 위의 코드를 추가하도록 한다. "CookieRun"이 pubspec.yaml에서 작성한 폰트를 적용시켜줄 것이다 4. 확인 이렇게 잘 적용한 것을 확인할 수 있다

Web Programming/Flutter&Dart

Android Studio 애뮬레이터 설치 및 Flutter Project 실행

1.애뮬레이터 설치 오른쪽 상단에 있는 빨간 네모안에 있는 핸드폰 모양의 아이콘을 클릭한다 【Create device】를 클릭한다 원하는 디바이스를 선택하고 【Next】를 클릭한다 R버전을 눌러서 다운로드를 한다 【Finish】클릭 하면 다운로드가 완료된 것이다 【Next】클릭한다 이번에 진짜 빨간색 네모를 누르면 끝이 난다 2.실행 시키기 다시 핸드폰 아이콘을 누른 다음 재생 버튼을 눌러보자 좀 시간이 걸리는데 기다리면 핸드폰이 생긴다.. 근데 살짝 종만 하긴 한데, 생기기 생겼으니 진행한다 이번에는 플러터를 실행시킬 생각인데, 우측 상단 위에 빨간색 네모 안에 있는 재생 버튼을 클릭 한다 상당히 오래 걸리지만 꾹 참고 기다리도록 한다. 그러면 오른쪽에 플러터 프로젝트가 뜨는 것을 확인할 수가 있다

Web Programming/Flutter&Dart

Flutter Scaffold 사용

stl 로 자동생성을 하도록 한다 주로 Page로 사용했을 때, Scaffold를 사용하고 안에는 appbar나 body, BottomNavigateButton를 넣어서 사용한다

Web Programming/Flutter&Dart

Flutter Project 생성하기 (feat. Android Studio

저번에 Flutter와 Android Studio를 다운로드 하고, Flutter의 플러그인까지 인스톨 하였다. 이번에는, Android Studio에서 Flutter 프로젝트를 생성하는 법을 알아보자 일단 Flutter 프로젝트를 나둘 폴더를 하나 생성해 놓자 【Android Studio】를 실행하고【New Flutter Project】를 더블 클릭 한다. 위의 화살표 순서대로 해주도록 한다 ◆ Project name 원하는 프로젝트 이름 적기 ◆ Project location 맨 처음 생성했던 경로 + 【Project name】을 넣어 주도록 한다 그리고 【Finish】클릭 한다 이런 화면이 뜨는데 이렇게 성공한 듯 하다

Web Programming/Flutter&Dart

Android Studio 설치&Flutter, Dart플러그인 설치

이 내용은 Flutter를, Flutter를 의한, Flutter를 위한, 글입니다 1.Android Studio 설치 https://developer.android.com/studio?hl=ko Download Android Studio and SDK tools | Android Developers The official IDE for Android app developers. developer.android.com 위의 링크로 들어가도록 한다. 【Download Android Studio】를 클릭하여 다운로드하도록 한다. 동의까지 해주면서 스근하게 다운로드를 해준다. 그리고 뭐가 다운로드 되는데, 그거도 실행시켜주면 된다 【Next】를 준내 갈겨주도록 한다. 이게 나오는데, 그대로 남자답게【OK】버튼..

Web Programming/Flutter&Dart

Window Flutter 설치&환경변수 설정

1.Flutter설치 https://docs.flutter.dev/get-started/install Install Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems. docs.flutter.dev 위의 링크를 클릭하고 Flutter홈페이지의 인스톨하는 페이지로 들어간다 해당하는 OS에 맞춰서 클릭하도록 한다. 나는 윈도우이기 때문에 윈도우를 클릭하겠다 바로 빨간네모를 클릭하도록 한다. 어차피 영어를 모르기 때문에 읽지 않도록 한다 내려받은 압축파일을 압축해제해버리자 압축해제가 끝났으면, 【flutter】 파일을 Ctrl + x를 눌러 잘라내기를 한 다음 ..

INICO
'Flutter' 태그의 글 목록 (4 Page)