[ Flutter ] 배경 데코레이션 & 이미지 터치 만들기

안녕하세요 이번 글에서는 배경의 데코레이션 및 이미지 터치 이벤트를 만들어 보겠습니다.

 

main.dart

 

import 'package:decoration/screen/home_screen.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: HomeScreen(),
  ));
}

 

home_screen.dart

 

import 'package:decoration/screen/next_screen.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          // LinearGradient -> begin 부터 시작하여 end 로 점점 변하는 데코레이션
          gradient: LinearGradient(
            begin: Alignment.topCenter, // 상단중앙
            end: Alignment.bottomCenter, // 하단중앙
            colors: [Colors.blue, Colors.green],
          ),
          // RadialGradient -> 시작점 부터 둥글게 퍼지는 데코레이션
          // gradient: RadialGradient(
          //   radius: 1.0, //둥근각도 
          //   center: Alignment.center, // 퍼지는 시작위치 
          //   colors: [Colors.blue, Colors.green],
          // )
        ),
        child: Center(
          //GestureDetector -> 이미지 터치 이벤트를 만들어준다.
          child: GestureDetector(
            //onTap -> 이미지 터치시 이벤트
              onTap: () {
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (_)
                  => NextScreen())
                );
              },
              // 들어갈 이미지
              child: Image.asset(
                'asset/img/start.png',
                width: 200.0,
              )),
        ),
      ),
    );
  }
}

 

next_screen.dart

 

import 'package:flutter/material.dart';

class NextScreen extends StatelessWidget {
  const NextScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Text(
        'Next Screen',
        style: TextStyle(fontSize: 50.0),
      )),
    );
  }
}

 

 

실행시켜 보면 

 

가운데 버튼을 누를 경우 다음 페이지로 넘어갑니다. 

 

 

LinearGradient

 

RadialGradient