어플화면에서 상품목록들이 나열되어 있을 때 상품리스트 중 하나를 클릭하면 상세화면으로 넘어가게 된다 그때, 해당하는 상품정보를 상세화면으로 이동하면서 데이터를 전달해 주게끔 하는 것을 해보겠다. 1. Route 만들기 일단 페이지가 2개이상 필요하기 때문에, 만들어야 한다. 일단 아래의 링크를 타고 라우터와 페이지 2개를 준비하도록 한다. https://initstory.tistory.com/121 Flutter Route 사용하기 Flutter에도 Route가 있다니 참 놀랍다 React나 Vue 같은 웹프로그래밍에서만 써봤는데, Flutter에도 있으니 바로 써보도록 하겠다 1. 기본코드 main.dart import 'package:flutter/material.dart'; import 'packa..
우리가 스마트폰을 사용할 때, 스크롤을 밑으로 쫙 내리면 상단 부분에 새로고침이 표시되는 것을 확인할 수 있다 이번에는 그걸 한번 해보겠다. 1. 기본 코드 일단 기본코드 main.dart와 연습용 practice_page.dart를 준비한다. 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 y..
CustomScrollView라는 단어만 봐도 뭔가 커스텀이 가능한 스크롤이 있는 화면같은 느낌이다 CustomScrollView는 보통 Sliver라는 단어가 들어가는 위젯과 함께 쓰는 듯 하니 한번 해보겠다 1. 코드 생김새 위의 코드를 보면, 우선 CustomScrollView가 제일 엄마이고, 그안에 slivers라는 배열을 선언한 것을 볼 수 있다 slivers 배열안에는 SliverGrid가 있는 것을 볼 수가 있는데, SliverGrid이외에 Sliver****라는 위젯을 사용할 수가 있다 우선 문법으로는 위와같이 사용하면 된다. 2. 전체 코드 main.dart import 'package:flutter/material.dart'; import 'package:flutter_practice..
항상 어딘가를 가면 List가 존재한다. 피할 수도 없다 List를 만드는 방법은 하나씩 하나씩 넣으면 된다. 하지만, 누군가가 만든 List를 쓰고 싶을 때는 어떻게 해야 할까? 그렇다 받은 List만큼 반복해서 출력하면 된다 그때 List.generate를 사용하면 된다. 약간 gridView.builder도 반복문을 돌렸지만 약간 다르다. 구분 지어 나열하냐 안 하냐 차이인 듯하다 List.generate: 빠꾸 없이 밑으로 반복 gridView.builder: 옆으로 몇 개씩 나열하면서 밑으로 반복 이제 시작해 보도록 하겠다 1. 기본 코드 main.dart import 'package:flutter/material.dart'; import 'package:flutter_practice/pages..
우리가 스마트폰으로 어플을 사용하다 보면 항상 정해진 느낌이 있다 상단에는 Appbar가 있고 메뉴버튼이나 로고 등이 있고 하단에는 NavigationBar가 있고 홈버튼 프로필보기 버튼 등이 있다 AppBar는 한번 만든적이 있으니 이번에는 Bottom에 3개의 메뉴가 있는 NavigationBar를 만들어 볼 것이다 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}..
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으로 보면서 하면 화면 비율이나 등등을 좀 더 확인할 수 있고 개발이 쉬워질 거 같다
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..
