요즘 웹 같은 경우는, 웬만하면 다 반응형이다. 화면 넓이가 크거나 작거나 디자인이 깨지지 않는 게 트렌디하기 때문이다. 반응형을 만들 때, 어려운 점이 가로로 사진들이 배치되어 있는데 화면 가로 사이즈가 줄어들 때 사진도 같이 줄어들어서 촌스럽게 변하는 경우가 있다 이때는 슬라이더로 처리하거나 minWidth나 minHeight같이 최소 사이즈를 정해서 대처를 한다 이번시간에는 Flutter에서 사이즈를 정하는 것을 해보겠다 1. 기본코드 main.dart import 'package:flutter/material.dart'; import 'package:flutter_practice/pages/practice_page.dart'; void main() { runApp(const MyApp()); } ..
플러터는 너무 좋은 거 같다. 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...
이번에는 이미지를 나열해 보겠다 이때는 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..
