플러터 그라데이션 주기

@override
Widget build(BuildContext context) {
  return MaterialApp(
//메인 페이지 디자인
    home: Scaffold(
      body: Container(
        //컨테이너
        decoration: const BoxDecoration(
          //데코레이션
          gradient: LinearGradient(colors: [
            //그라데이션
            Color.fromARGB(255, 57, 3, 151),
            Color.fromARGB(255, 140, 90, 227),
          ]),
        ),
        child: const Center(
          child: Text("hello world!"),
        ),
      ),
    ),
  );
}

 

 

플러터로 그라데이션을 받을때는 일단 컨테이너를 선언, 데코래이션을 선언하고 그라데이션을 또 선언합니다.

그리고 나서 2개 이상의 색이 들어가야하니 list 로 받아서 2가지 이상의 색을 넣어 그라데이션을 만들어줍니다.

플러터는 기본 설정으로 그라디에션을 왼쪽에서 시작해 오른쪽으로 진행 합니다. 

 begin: Alignment(x, y) 통해 좌표를 설정 할수 있고

begin: Alignment.topLeft 와 같이 방향을 정할수도 있습니다.  그리고

end: Alignment.bottomRight 로 그라데이션 끝을 정해주면  begin 으로 시작값 => end 로 끝나는 값을 정할수 있습니다.

플러터는 리스트를 선언할때 제네릭을 통해 타입을 정해줄수 있습니다.

@override
Widget build(BuildContext context) {
  return MaterialApp(
//메인 페이지 디자인
    home: Scaffold(
      body: Container(
//컨테이너
        decoration: const BoxDecoration(
//데코레이션
          gradient: LinearGradient(colors: [
//그라데이션
            Color.fromARGB(255, 33, 2, 86),
            Color.fromARGB(255, 140, 90, 227),
          ], begin: Alignment.topLeft, end: Alignment.bottomRight),
        ),
        child: const Center(
          child: Text("hello world!"),
        ),
      ),
    ),
  );
}