웹사이트 검색

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에 대한 환경을 설정했으면 다음을 실행하여 새 애플리케이션을 만들 수 있습니다.

    1. flutter create flutter_gradient_example

    새 프로젝트 디렉터리로 이동합니다.

    1. 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 위젯에 decorationBoxDecoration을 추가하는 것입니다. 이를 통해 색상을 지정할 수 있는 LinearGradientbeginend 정렬.

    코드를 컴파일하고 에뮬레이터에서 실행합니다.

    이렇게 하면 파란색으로 화면 상단에서 시작하여 화면 하단에서 점차 빨간색으로 전환되는 선형 그래디언트가 생성됩니다.

    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 사용

    BoxDecorationAppBar에 적용되지 않습니다. 그러나 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';
    

    마지막으로 AppBarGradientAppBar 및 후속 색상으로 바꿀 수 있습니다.

    appBar: GradientAppBar(
      title: Text('Flutter Gradient Example'),
      gradient: LinearGradient(
        colors: [
          Colors.cyan,
          Colors.indigo,
        ],
      ),
    ),
    

    이 예에서는 청록색 및 남색과 함께 LinearGradient를 사용합니다.

    참고: 이전 버전의 GradientAppBar는 버전 0.1.0에서 사용되지 않는 backgroundColorStartbackgroundColorEnd를 사용했습니다.

    코드를 컴파일하고 에뮬레이터에서 실행합니다.

    이렇게 하면 청록색으로 화면 왼쪽에서 시작하여 화면 오른쪽에서 점진적으로 남색으로 전환되는 선형 그래디언트가 생성됩니다.

    결론

    이 문서에서는 LinearGradientGradientAppBar를 사용하여 Flutter 애플리케이션에 그래디언트를 적용했습니다.

    Flutter에 대해 자세히 알아보려면 Flutter 주제 페이지에서 연습 및 프로그래밍 프로젝트를 확인하세요.