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를 넣어서 사용한다

INICO
'앱' 태그의 글 목록 (2 Page)