컨테이너, 텍스트 등 . 아래와 같이 그라데이션을 패키지 없이 작성이 가능 합니다.
final gradient = LinearGradient(
begin: Alignment.topLeft, end: Alignment.bottomRight,
colors: [Colors.blueAccent, Colors.redAccent, Colors.amberAccent]);
텍스트 자체의 Shadow 그림자 . .
Text('Do Not \nUse\nPackage\nFor this\nGradation.', style: TextStyle(fontSize: 50,fontWeight: FontWeight.bold,
shadows: [
Shadow(
blurRadius:10.0, // shadow blur
color: Colors.black, // shadow color
offset: Offset(2.0,2.0), // how much shadow will be shown
),
],))
쉐이더를 이용해서 그라디언트를 입히면 위와 같은 화면이 만들어 집니다.
ShaderMask(
shaderCallback: (bounds)=>gradient.createShader(Rect.fromLTWH(0, 0, bounds.width,
bounds.height)),
child: Text('Do Not \nUse\nPackage\nFor this\nGradation.', style: TextStyle(fontSize: 50,
fontWeight: FontWeight.bold,
shadows: [
Shadow(
blurRadius:10.0, // shadow blur
color: Colors.black, // shadow color
offset: Offset(2.0,2.0), // how much shadow will be shown
),
],))),
'Ui' 카테고리의 다른 글
flutter 키보드 입력 Overflow 해결 (0) | 2024.01.19 |
---|---|
Ui 배경화면 설정에서 그라디언트까지, set Background (0) | 2023.12.17 |
Simple note Ui (1) | 2023.12.15 |
Ui Flutter Design Morphism 로그인 (0) | 2023.12.14 |
Ui login design (0) | 2023.12.12 |