flutter 그라데이션Flutter: 그래디언트 및 GradientAppBar 플러그인 사용 방법

flutter 그라데이션
We recently looked at how to create our first Flutter app. Next up, we’re going to investigate how we can add a gradient background, because they’re so cool!
최근에 우리는 첫 번째 Flutter 응용 프로그램을 어떻게 만드는지 연구했다.다음은 점차적인 배경을 어떻게 추가하는지 연구할 것입니다. 왜냐하면 그들은 매우 멋있기 때문입니다!
To ensure we’re all playing the same game - go ahead and create a Flutter application by running the following:
동일한 게임 - 다음 단계를 계속하여 Flutter 애플리케이션을 만듭니다.

$ flutter create flutter_gradient
$ cd flutter_gradient
$ code .

# run this on an iOS/Android simulator

그래디언트(Gradients)
We can now add a gradient to our HomePage like so:
이제 이렇게 첫 페이지에 그래디언트를 추가할 수 있습니다.

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,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter'),
      ),
      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),
          ),
        ),
      )));
  }
}

The key to this is the addition of a decoration and boxDecoration to our Container widget. This allows us to define a LinearGradient which can be given colors , as well as a begin and end Alignment .
이렇게 하는 관건은 우리의 Container 작은 부품에 decoration과 boxDecoration을 첨가한 것이다.이로써 우리는 LinearGradient을 정의할 수 있고 colors과 begin, end Alignment을 지정할 수 있다.

decoration: BoxDecoration(
  gradient: LinearGradient(
    begin: Alignment.topRight,
    end: Alignment.bottomLeft,
    colors: [Colors.blue, Colors.red])),

This gives us the following:
이것은 우리에게 다음과 같은 내용을 준다.
Awesome! Kind of reminds me of the frozen Slushies I used to get as a kid… :)
너무 좋아요!내가 어렸을 때 얼렸던 빙수가 생각나네...:)
중지(Stops)
What if we had multiple colors, and wanted to control how much they take up of the gradient? We can do that with stops :
만약 우리가 여러 가지 색깔을 가지고 그것들이 점차적인 변화를 차지하는 정도를 조절하고 싶다면 어떻게 합니까?우리는 stops으로 할 수 있다.

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
  ])),

This then allows us to fraction our gradient into precise chunks. Here’s our (not so pretty) result:
그리고 나서, 이것은 우리로 하여금 사다리를 정확한 블록으로 나눌 수 있게 한다.이것은 우리의 결과이다.
그래디언트 애플리케이션 표시줄(Gradient App Bar)
What if we could extend this gradient to our appBar ? I mean, we can’t do it straight out the box, but there’s a plugin for that!
만약 우리가 이 사다리를 우리의 appBar까지 확장할 수 있다면 어떻게 appBar?내 말은, 우리는 직접 이 점을 할 수 없지만, 플러그인이 하나 있다!
Under the dependencies block, add the following to your pubspec.yaml file: dependencies 블록에서 pubspec.yaml 파일에 다음을 추가합니다.

dependencies:
  gradient_app_bar: ^0.0.1
  flutter:
    sdk: flutter

We can then import the gradient_app_bar package inside of main.dart :
그리고 main.dart에서 gradient_app_bar 패키지를 가져올 수 있습니다.

import 'package:gradient_app_bar/gradient_app_bar.dart';

Finally, we can replace our AppBar with the GradientAppBar and subsequent colors:
마지막으로 GradientAppBar과 그 다음 색상으로 AppBar을 교체할 수 있습니다.

appBar: GradientAppBar(
    title: Text('Flutter'),
    backgroundColorStart: Colors.cyan,
    backgroundColorEnd: Colors.indigo,
  ),

Tada! Our appBar now has a gradient:
다다다 우리의 appBar은 현재 점차적인 변화를 가지고 있다.
번역:https://www.digitalocean.com/community/tutorials/flutter-flutter-gradient
flutter 그라데이션