본문 바로가기

Flutter

 (25)
flutter) 이미지 등록하여 Image 위젯으로 사진 등록해보기 1.assets 폴더 밑 images 폴더 안에 이미지 파일을 저장한다. 2. pubspec.yml 파일에서 assets 부분을 주석 해제한 뒤 추가한 파일을 넣어준다. 3. 사용할 곳에서 Image 위젯의 asset 메소드를 이용해 이미지 넣어주기
flutter) 커스텀 위젯에 인수를 받아 사용하기 Hello World는 하드코딩 되어 있다. 요걸 인수로 받아서 넣어 사용해보자 위의 방법은 조금 복잡하다. 더 쉽게 인자를 받자마자 class 내부 값으로 바로 받는 방법이 있다 const StyledText(this.innerText, {super.key}) 생성자의 인자로 받는 부분에 this를 붙여주면 클래스내부 변수와 바로 일치시킨다.
flutter) var가 아닌 다른 타입을 사용하여 변수할당하기 startAlignment 변수명에 마우스를 올리면 타입이 Alignment로 나온다. 해당 타입으로 할당해보자 이상이 없다. 그런데 Alignment를 생성할 때 초기화값을 주지않고 사용한다면? 한마디로 null값을 줘버리고 변수명만 잡는다면 ? non-nullable이다. 이럴 땐 어떻게 해야될까? Alignment? 변수명; 이렇게 하면 된다! 그런데 gradient 의 beign과 end속성에는 non-nullable 속성을 갖기 때문에 var로쓰자.. ㅋㅋㅋ
flutter) 변수 할당하여 사용해보기 그라디언트시작과 끝 부분의 Alignment... 으로 처리하였는데 이 두가지를 변수로 할당하여 처리해보자 const를 지우니 에러가 사라졌다! import 'package:flutter/material.dart'; import 'package:practice/styled_text.dart'; var startAlignment = Alignment.topLeft; var endAlignment = Alignment.bottomRight; class GradientContainer extends StatelessWidget { const GradientContainer({super.key}); @override Widget build(context) { return Container( decoration:..
flutter) 커스텀 위젯을 파일로 분리해서 import하기 import 'package:flutter/material.dart'; import 'package:practice/gradient_container.dart'; // =>> 프로젝트명/파일명 void main() { runApp() { const MaterialApp( home: Scaffold( body: GradientContainer(), )); } } import 'package:flutter/material.dart'; class GradientContainer extends StatelessWidget { const GradientContainer({super.key}); @override Widget build(context) { return Container( decoration: con..
flutter) 커스텀 위젯 만들 때 주의사항 커스텀 위젯 만들 때 warning이 뜨는데 그것을 해결하기 위해 정리해본다 1. 생성자함수를 만들어줘야 한다 2. 메모리 할당할 때 재사용성을 위해서 const로 선언해준다 3. 커스텀 위젯이 const이기 때문에 사용할 때 제일 바깥쪽에도 const를 선언해준다 import 'package:flutter/material.dart'; void main() { runApp( const MaterialApp( home: Scaffold( backgroundColor: Colors.red, body: GradientContainer(), ), ), ); } class GradientContainer extends StatelessWidget { const GradientContainer({super.key}..
flutter) 위젯을 분리해보자 코드가 많아지면서 가독화, 재사용성을 위해서 분리해야한다. 플러터에서는 Class를 이용해 분리한다. 분리하는 방법에 대해서 알아보자 flutter에서 class 분리를 하기 위해 하나의 클래스만 바라보는 듯 하다 고것이 바로 statelessWidget 클래스이다. 커스텀 클래스를 만들기 위해서는 statelessWidget을 무조건 상속한 뒤 build라는 메소드를 오버라이딩 하여 사용해야한다. 하나만을 보고 오버라이딩 한다는 것은 빌드할 때 플러터가 하나의 클래스만 보고 추가로 위젯을 만들면 되니 편하니까 그런 듯 하다! import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( home: Scaffold( backgroun..
flutter) graident 원하는 방향으로 효과주기 import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( home: Scaffold( backgroundColor: Colors.red, body: Container( decoration: BoxDecoration( gradient: LinearGradient( colors: [ Colors.blue, Colors.red ], begin: Alignment.topLeft, end: Alignment.bottomRight ) ), child: Center( child: Text("Hello World!"), ), ), ), ), ); }

티스토리툴바