반응형 언어 공부/Flutter7 [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. [Flutter] CircleAvatar & Fonts Flutter는 CircleAvatar라는 Widget이 있습니다. 이미지를 원형에 넣고 싶어서 쓴 기능입니다. 쓰는 방법은 간단합니다. backgroundImage를 통해 이미지를 넣어줍니다. child: Column( children: [ CircleAvatar( radius: 60.0, backgroundImage : AssetImage('images/img1.jpeg'), 다만 여기서 중요한건 경로 설정입니다. 경로 설정은 pubspec.yaml 파일에서 진행합니다. flutter: assets: - images/img1.jpeg 저는 images 라는 폴더를 만들었고, 그 안에 img1.jpeg 파일을 넣어줬습니다. 그리고 파이썬 처럼 간격이 매우 중요하기 때문에 유의하시길 바랍니다! Font를.. 2020. 8. 6. 이전 1 2 다음 반응형
