본문 바로가기

Ui

Ui 패키지 없이 그라디에이션 꾸미기.

컨테이너, 텍스트 등 . 아래와 같이 그라데이션을 패키지 없이 작성이 가능 합니다.

 

 

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