본문 바로가기

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' 카테고리의 다른 글