플러터는 너무 좋은 거 같다. Android와 IOS를 동시에 개발이 가능하면서 Web도 동시에 개발이 가능하기 때문에, 직원을 3명 고용해서 개발해야 할 것을 한 명으로 개발을 할 수 있도록 했다 지금까지 Flutter를 실행 시켰을때 Android Studio의 에뮬레이터를 사용했는데, 웹으로도 실행시키는 방법이 있었다 1. Web으로 실행시키기 정말 간단하다. 아래와 같이 하면 끝이다 정말 이게 끝이다 2. 실행 결과 결과는 아래와 같다 Web으로 보면서 하면 화면 비율이나 등등을 좀 더 확인할 수 있고 개발이 쉬워질 거 같다
웹이나 앱이나 언제나 등장하는 것이 팝업창이다. 팝업창을 (Dialog라고 한다) 예를 들면 에러를 표시할 때나, 아니면 [뭐뭐뭐 하시겠습니까?]와 같이 물어볼 때 Dialog를 띄운다 Flutter에서도 한번 Dialog를 표시해보자 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 ..
css에서는 position: absolute를 사용해서 이미지 위에 덮어씌우는 느낌 (겹치기)으로 이미지의 위에 문자를 표시하거나 할 수 있다. 그런 기능을 Flutter에서는 Positioned라는 것을 사용하면 된다 위젯 위에 위젯을 올라와 있고 그 위치를 마음대로 조정하는 게 가능하다는 말이다 이제 시작해 보도록 할까 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? k..
이번에는 TextoFormFiled를 사용해 보겠다 TextoFormFiled를 사용하면 스타일과 입력체크등을 설정할 수 있다 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 conte..
Flutter에서 Svg를 사용하는 법을 해보겠다 1. Package 사용하기 우선 플러터 아래의 링크로 간다 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 그리고 검색창에 flutter_svg를 검색한다 flutter_svg를 클릭한다 복사버튼을 클릭하도록 한다 2. pubspec.yaml에 붙여 넣기 pubspec.yaml 파일에 붙여 넣는다 위치는 dependencies > flutter > 안에다가 붙여 넣는다 ※ ^2.0...
Flutter에도 Route가 있다니 참 놀랍다 React나 Vue 같은 웹프로그래밍에서만 써봤는데, Flutter에도 있으니 바로 써보도록 하겠다 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(BuildC..
이번에는 이미지를 나열해 보겠다 이때는 GridView라는 것을 사용해 보도록 한다 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 MaterialAp..
저번시간 TabBar에 이어서 이번에는 TabBarView와 Expanded을 사용해 볼 것이다 저번 시간 코드는 아래의 링크를 참조한다 https://initstory.tistory.com/118 1. practice_page.dart 코드 수정 practice_page.dart import 'package:flutter/material.dart'; import 'package:flutter_practice/components/practice_tabbar.dart'; class PracticePage extends StatelessWidget { const PracticePage({Key? key}) : super(key: key); @override Widget build(BuildContext co..
