[Programming/Flutter] AppBar에 Gradient Color 적용

AppBar에 Gradient 색상을 적용시켜보았다.

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        toolbarHeight: 70,
        title: new Text(
          'Gradient',
          style: new TextStyle(
            fontWeight: FontWeight.w600,
            fontFamily: 'Poppins',
            fontSize: 36.0,
          ),
        ),
        centerTitle: true,
        flexibleSpace: new Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: <Color>[
                Colors.red,
                Colors.blue,
              ],
            ),
          ),
        ),
      ),
    );
  }
}

---

다음은 FractionalOffet 메소드와 stops, tileModel로 그레디언트 색상을 조절하는 다른 코드이다.

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        toolbarHeight: 70,
        title: new Text(
          'Gradient',
          style: new TextStyle(
            fontWeight: FontWeight.w600,
            fontFamily: 'Poppins',
            fontSize: 36.0,
          ),
        ),
        centerTitle: true,
        flexibleSpace: new Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: const FractionalOffset(0.0, 0.0),
              end: const FractionalOffset(1.0, 1.0),
              colors: <Color>[
                const Color(0xFf3366FF),
                const Color(0xFF00CCff),
              ],
              stops: <double>[0.0, 1.0],
              tileMode: TileMode.clamp,
            ),
          ),
        ),
      ),
    );
  }
}