Flutter Wrap위젯은 이미지나 Container 같은 위젯들을 가로로 여러 장을 나열했을 때, 화면을 넘어 Overflow가 되는 경우가 있다 이때, Overflow가 되는 위젯을 아래로 배치해주는 것이 Wrap위젯이다 그럼 한번 사용해 볼까 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 th..
플러터는 너무 좋은 거 같다. Android와 IOS를 동시에 개발이 가능하면서 Web도 동시에 개발이 가능하기 때문에, 직원을 3명 고용해서 개발해야 할 것을 한 명으로 개발을 할 수 있도록 했다 지금까지 Flutter를 실행 시켰을때 Android Studio의 에뮬레이터를 사용했는데, 웹으로도 실행시키는 방법이 있었다 1. Web으로 실행시키기 정말 간단하다. 아래와 같이 하면 끝이다 정말 이게 끝이다 2. 실행 결과 결과는 아래와 같다 Web으로 보면서 하면 화면 비율이나 등등을 좀 더 확인할 수 있고 개발이 쉬워질 거 같다
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...
저번시간 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..
이번에는 모서리를 둥글게 해 보도록 하겠다 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 PracticeP..
저번에는 Image를 넣고 가로넓이, 새로 넓이 조절하는 법과 BoxFit을 사용하는 법을 배웠다 https://initstory.tistory.com/114 이번에는 가로넓이, 새로넓이를 조절하지 않고 화면비율대로 조절하는 법을 하겠다 이때는 AspectRatio 라는 위젯을 사용한다 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);..
이번에는 Flutter에서 Image를 넣는 법을 하겠다. 1. 이미지 폴더 만들기 최상위 프로젝트 폴더를 마우스 오른쪽클릭한 후 New > Directory를 클릭한다 New Directory라고 나오고 밑에 입력칸이 있다 거기에 assets를 입력하고 enter를 누르자 그럼 위와 같이 assets폴더가 생성된 것을 확인할 수 있다 2. pubspec.yaml 파일 설정 기본 경로를 설정해야 하기 때문에 pubspec.yaml파일을 뭔가를 적어야 한다 pubspec.yaml 파일을 더블클릭한다 pubspec.yaml 스크롤을 내리다보면 flutter: 가 보일텐데 그 밑에 주석으로 처리된 assets가 있으면 스크롤을 멈춘다 주석으로 처리된 assets부분을 위와 같이 해준다 ※ 반드시 들여 쓰기를 ..
1. ListView ListView는 새로 스크롤을 생기게 하는 방법이다. 일단 처음 코드를 보도록 한다 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 Materi..
