본문 바로가기
반응형

Flutter7

[Clone Coding] Netflix를 따라서 만들어보자! -인프런 강의 본 글은 제가 나중에 다시 보기 위해 작성한 글 입니다. main.dart import 'package:clone_netflix/Screen/home_screen.dart'; import 'package:clone_netflix/Widget/bottom_bar.dart'; import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State { TabController controller; @override Widget bu.. 2020. 8. 19.
[Flutter] FlatButton & setState & onPressed 프로그래밍은 힘든 과정을 버티는 것 같습니다.. 오늘은 버튼을 사용해서 개발을 했습니다. 먼저 버튼의 상태를 변경시켜야 하기 때문에 StatefulWidget으로 사용을 했으며 Button은 항상 onPressed가 따라 옵니다 그 이유는, 버튼을 눌렀을 때 어떠한 행동을 할 것인지 알아야 되기 때문입니다. 그리고 setState로 상태를 변경 시켜줍니다. 아래의 소스코드는 이미지 5개 파일들을, 버튼이 눌렸을 때 랜덤으로 화면에 출력해주는 소스코드입니다. import 'package:flutter/material.dart'; import 'dart:math'; void main() { return runApp( MaterialApp( home: Scaffold( backgroundColor: Color.. 2020. 8. 10.
[Flutter] Expanded (레이아웃 그림 벗어남 방지) Expanded는 화면의 이미지의 크기 아니면 레이아웃을 효율적으로 하기 위해 사용합니다. 위 코드블럭은 눈이 1인 주사위 이미지를 출력하는 구문인데, 이미지의 픽셀은 500,500 이라 휴대폰의 화면이 넘어가게 됩니다. 그러면 레이아웃이 망가지며 기기마다 일정한 크기의 레이아웃을 보여주기 어렵습니다. 그리고 원하는 이미지도 보여주질 못하는 경우도 있습니다. 그럴 떄 Expanded를 사용하시면 됩니다. import 'package:flutter/material.dart'; void main() { return runApp( MaterialApp( home: Scaffold( backgroundColor: Colors.red, appBar: AppBar( title: Text('Dicee'), backg.. 2020. 8. 7.
[Flutter] Card & ListTitle & Icon 아래에 더 정확한 설명을 해주는 주소 첨부 Flutter에는 Card라는 기능이 있습니다. 처음에 Container로 만들었지만 Card로 바꾼 이유는 디자인과 편의성 때문입니다. 카드는 모서리 끝에 약간 둥근 느낌이 있고, Container 처럼 margin과 padding을 줄 수 있습니다. padding을 주는 방법은 제 코드에서 child:Row 부분에서 Alt(Option)키를 누르고 엔터를 치시면 확인 하실 수 있습니다. 그리고 간단하게 아이콘과 텍스트 꾸미는 방법을 알아봅시다. Card( color: Colors.white, margin: EdgeInsets.symmetric(vertical: 10.0,horizontal: 25.0), child: Padding( padding: const .. 2020. 8. 7.
반응형