BoxDecoration 및 GradientAppBar를 사용하여 Flutter에서 그라디언트를 사용하는 방법
소개
색상 그라디언트는 시작 색상과 위치 및 끝 색상과 위치를 사용합니다. 그런 다음 색상 간 전환을 수행합니다. 색상 이론을 고려하여 응용 프로그램을 평범한 디자인보다 시각적으로 더 흥미롭게 만들 수 있습니다.
이 문서에서는 gradient_app_bar
패키지를 사용하여 Flutter 애플리케이션에 그래디언트를 적용합니다.
전제 조건
이 자습서를 완료하려면 다음이 필요합니다.
- Flutter를 다운로드하고 설치하려면.
- Visual Studio Code 다운로드 및 설치
- 코드 편집기용 플러그인을 설치하는 것이 좋습니다.\n
Dart
플러그인이 Android Studio용으로 설치되었습니다.Flutter
확장이 Visual Studio Code용으로 설치되었습니다.
이 튜토리얼은 Flutter v1.22.2, Android SDK v30.0.2 및 Android Studio v4.1에서 검증되었습니다.
1단계 - 프로젝트 설정
Flutter에 대한 환경을 설정했으면 다음을 실행하여 새 애플리케이션을 만들 수 있습니다.
- flutter create flutter_gradient_example
새 프로젝트 디렉터리로 이동합니다.
- cd flutter_gradient_example
flutter create
를 사용하면 버튼을 클릭한 횟수를 표시하는 데모 애플리케이션이 생성됩니다.2단계 - LinearGradient 사용
코드 편집기로
main.dart
를 열고 코드를 수정하여BoxDecoration
을 추가합니다.import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Gradient Example'), ), body: Center( child: Container( decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topRight, end: Alignment.bottomLeft, colors: [ Colors.blue, Colors.red, ], ) ), child: Center( child: Text( 'Hello Gradient!', style: TextStyle( fontSize: 48.0, fontWeight: FontWeight.bold, color: Colors.white, ), ), ), ), ), ); } }
이것의 핵심은
container
위젯에decoration
및BoxDecoration
을 추가하는 것입니다. 이를 통해색상
을 지정할 수 있는LinearGradient
와begin
및end
정렬
.코드를 컴파일하고 에뮬레이터에서 실행합니다.
이렇게 하면 파란색으로 화면 상단에서 시작하여 화면 하단에서 점차 빨간색으로 전환되는 선형 그래디언트가 생성됩니다.
3단계 - LinearGradient와 함께 중지 사용
추가 색상을 사용하고 화면에서 색상 전환이 적용되어야 하는 위치를 보다 세밀하게 제어할 수도 있습니다.
코드 편집기에서
main.dart
를 다시 방문하고중지
를 추가합니다.class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Gradient Example'), ), body: Center( child: Container( decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topRight, end: Alignment.bottomLeft, stops: [ 0.1, 0.4, 0.6, 0.9, ], colors: [ Colors.yellow, Colors.red, Colors.indigo, Colors.teal, ], ) ), child: Center( child: Text( 'Hello Gradient!', style: TextStyle( fontSize: 48.0, fontWeight: FontWeight.bold, color: Colors.white, ), ), ), ), ), ); } }
코드를 컴파일하고 에뮬레이터에서 실행합니다.
이렇게 하면 화면 아래로 노란색이 있는
0.0
에서 시작하여 화면 아래로0.4
에서 빨간색으로 전환된 다음에서 선형 그래디언트가 생성됩니다. 화면 아래쪽 >0.6
에서 남색으로 전환된 다음 화면 아래쪽1.0
에서 청록색으로 전환됩니다.4단계 - GradientAppBar 사용
BoxDecoration
은AppBar
에 적용되지 않습니다. 그러나GradientAppBar
패키지를 사용하여AppBar
에 색상 그라디언트를 추가할 수 있습니다.코드 편집기에서
pubspec.yaml
을 열고gradient_app_bar
를 추가합니다.dependencies: flutter: sdk: flutter gradient_app_bar: ^0.1.3
그런 다음
main.dart
를 다시 방문하고gradient_app_bar
에 대한 가져오기를 추가합니다.import 'package:flutter/material.dart'; import 'package:gradient_app_bar/gradient_app_bar.dart';
마지막으로
AppBar
를GradientAppBar
및 후속 색상으로 바꿀 수 있습니다.appBar: GradientAppBar( title: Text('Flutter Gradient Example'), gradient: LinearGradient( colors: [ Colors.cyan, Colors.indigo, ], ), ),
이 예에서는 청록색 및 남색과 함께
LinearGradient
를 사용합니다.참고: 이전 버전의
GradientAppBar
는 버전 0.1.0에서 사용되지 않는backgroundColorStart
및backgroundColorEnd
를 사용했습니다.코드를 컴파일하고 에뮬레이터에서 실행합니다.
이렇게 하면 청록색으로 화면 왼쪽에서 시작하여 화면 오른쪽에서 점진적으로 남색으로 전환되는 선형 그래디언트가 생성됩니다.
결론
이 문서에서는
LinearGradient
및GradientAppBar
를 사용하여 Flutter 애플리케이션에 그래디언트를 적용했습니다.Flutter에 대해 자세히 알아보려면 Flutter 주제 페이지에서 연습 및 프로그래밍 프로젝트를 확인하세요.