Flutter (25) 썸네일형 리스트형 flutter) 이미지 사용 1.pubspec.yaml에서 사용할 이미지 디렉토리 설정 flutter: # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true # To add assets to your application, add an assets section, like this: assets: - images/ 2. Image 위젯으로 사진 가져오기 import "package:flutter/material.dart"; void main() { runApp(M.. flutter) Image asset > png 투명도 설정 색상에 마우스를 호버하면 색상을 마우스로 선택해 설정할 수 있다. 저 부분을 조정하여 투명도 설정을 할 수 있다 flutter) OutlinedButton을 label과 text로 사용하기 기존에는 일반 OutlinedButton을 사용했는데 아이콘과 함께 들어있는 버튼을 사용해보자 기존 코드 import 'package:flutter/material.dart'; class StartScreen extends StatelessWidget { const StartScreen({super.key}); @override Widget build(context) { return Column( mainAxisSize: MainAxisSize.min, children: [ Image.asset( "assets/images/quiz-logo.png", height: 500, ), const SizedBox( height: 30, ), Text( 'Learn Flutterthe fun way!', styl.. flutter) 기본적인 플러터 구조 숙지를 위한 단순반복연습 플러터의 기본 구조 1. import package:flutter/material.dart 2. main 으로 시작함 3. runApp 안에 있는 위젯을 빌드해줌 4. MaterialApp 을 깔아줌 (책상으로 생각하기) 5. MaterialApp 안에 home이 있다. home에 Scaffold 을 깔아줌 (책상의 홈에 파져있는 곳에 도화지를 깐다고 생각하기) 6. 도화지 위에 body영역에 원하는 위젯 넣기 (여기선 Text위젯만 넣는다.) import 'package:flutter/material.dart'; import 'package:practice/start_screen.dart'; void main() { runApp( const MaterialApp( home: Scaffold( body:.. flutter) dart math패키지사용하기, 문자열+변수 사용하기 js에서는 백틱을 이용해 js 변수명과 함께 표현할 수 있다. let test = 'hello'; let result = `${test} world!`; console.log(result); // hello world! dart에서도 비슷하게 사용할 수 있다. var a = '나는'; var result = '$a 탐훈입니다'; pring(result); // 나는 탐훈입니다 js dart `${변수명}` '$변수명' import 'package:flutter/material.dart'; import 'dart:math'; final randomizer = Random(); // 랜덤 함수 final로 할당함 class DiceRoller extends StatefulWidget { @override S.. flutter) StatefulWidget으로 re-excute build하기 Roll Dice 버튼을 누르면 이미지가 변경 되도록 만들었다. 그런데 실행은 되지만 이미지 변경이 되지 않았다. 그 이유는 StatelessWidget을 상속했기 때문이다 DiceRoller라는 이름으로 파일로 따로 빼서 StatelessWidget이 아닌 StatefulWidget을 상속하여 데이터가 변경될 시에 re build를 하도록 만들어보자 1. 파일을 만든다. 2. StatefulWidget을 상속한 클래스, State를 상속한 클래스 두가지를 만든다. 이렇게 해도 메소드작동이 안된다... 그 이유는... setState를 쓰지 않았기 때문이다 State를 상속한 클래스에서 setState 메소드를 사용하여 변수 값을 바꿔주면 update할 녀석들을 re-excute build 해준다. flutter) 위젯 중앙으로 배치, 사진과 버튼 사이 간격 주기 지금 주사위 위치를 Y축 중앙으로 두려면? Column 위젯 한 덩어리 안에서 속성을 이용해 Y축 중앙 배치한다. 사진과 버튼 텍스트 사이에 간격 주는 방법은 두가지가 있다. 1. TextButton의 style 속성 안에 padding속성으로 조절한다. 2. 이미지 위젯과 버튼 위젯 사이에 SizedBox 위젯 넣어주기 각자의 차이 SizedBox padding 다른 위젯의 크기를 건드리지 않고 띄워줌 위젯의 크기가 늘어나면서 띄워줌 flutter) TextButton으로 클릭이벤트 달기 Container 위젯에 child를 여러개 붙일 수 없다. 그래서 child에 Column 위젯을 넣는다. Column위젯에 children속성에는 여러개 위젯을 붙일 수 있다. 이전 1 2 3 4 다음
