본문 바로가기

Flutter

 (29)
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!"), ), ), ), ), ); }
flutter) Container 사용하여 gradient 먹이기 구조를 모르니까 메소드 헬퍼를 못 부르겠네요... 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] ) ), child: Center( child: Text("Hello World!"), ), ), ), ), ); } Container 컴포넌트는 html로 치면 div와 같은 역할이지 않을까 하는 생각이 드네요 구조를 트리로 나타내보면 아래와 같습니다. body..
flutter) backgroundcolor 적용하기 기본적인 backgroundColor를 적용해보자 플러터의 정해놓은 키 값에 맞춰서 적용하면 된다....
flutter) flutter 개행 하는 법 다음과 같이 코드가 길 때 1. 소괄호마다 콤마를 넣어준다. 2. ctrl + shfit + p 누른 뒤 format document를 실행 결과
flutter) const 란 둘의 차이는 재활용을 하냐 안하냐의 차이다 컴포넌트 마다 const를 해주면 재활용할 때 메모리 낭비를 줄일 수 있다.

티스토리툴바