카테고리 없음

그라디언트, 이미지 예문

신승호. 2023. 1. 29. 13:09

3-1                                                             

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            width: 300,
            height: 400,
            decoration: BoxDecoration(
              color: Colors.red,
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                Colors.red,
                Colors.orange,
                Colors.yellow,
                Colors.green,
                Colors.blue,
                ]
              )
            ),
          ),
        ),
      ),
    );
  }
}

3-1 실행결과

 

 

 

 

 

 

 

 

 

 

 

 

3-2

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(150),
                bottomRight: Radius.circular(150)
              ),
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                Colors.red,
                Colors.orange,
                ]
              )
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,     //위젯 가운데 배치
              children: [
                CircleAvatar(radius: 50,
                backgroundColor: Colors.yellow,)
            ],
            ),
          ),
        ),
      ),
    );
  }
}

 

3-2 실행결과

 

 

 

 

 

3-3

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
              child: Column(
                children: [
                  Container(
                    padding: EdgeInsets.all(15),
                    decoration: BoxDecoration(
                      gradient: LinearGradient(                         //그라데이션 효과
                        begin: Alignment.topLeft,                        //그라데이션 효과 왼쪽위부터
                        end: Alignment.bottomRight,                  //그라데이션 효과 오른쪽아래까지
                        colors: [
                                Color(0xff4dabf7),
                                Color(0xffda77f2),
                                Color(0xfff783ac),
                                 ],
                      ),
                      borderRadius: BorderRadius.circular(200),
                    ),
                        child: CircleAvatar(radius: 130,
                                backgroundImage: AssetImage('assets/images/kante.jpg'),          //사진 상대경로
                  ),
          ),
          Text('My puppy')                //우리집 강아지
                ],
              ),
        ),
      ),
    );
  }
}

3-3 실행결과

3-4

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
              child: Container(
                width: double.infinity,
                height: 100,
                color: Color.fromARGB(255, 71, 166, 244),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween, //widget을 start, end 사이에 고르게 배치
                  children: [
                    Row(            //사진과 Text를 Row로 묶음
                    children: [
                    Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: ClipRRect(                                      //이미지 원모양
                      borderRadius: BorderRadius.circular(100),
                      child: Image.asset('assets/images/kante.jpg',     //이미지를 저장해 Image.assets으로 불러옴
                      width: 50,
                      height: 50,),
                      ),
                    ),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,       //세로축 기준 중앙
                          crossAxisAlignment: CrossAxisAlignment.start,      //세로축 기준 좌측 정렬
                          children: [
                            Text('Kante', style: TextStyle(fontSize: 18, color: Colors.white), ),
                            Text('My puppy', style: TextStyle(fontSize: 10, color: Colors.white),),
                            Text('Very Ugly', style: TextStyle(fontSize: 10, color: Colors.white),),
                          ],
                        ),
                     
                    ],
                    ),
                    Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Icon(Icons.add, color: Colors.white,),
                    )
                  ],
                )
                ),
        ),
      ),
    );
  }
}

3-4 실행결과

사진이 짤림 (랜덤 이미지로 했을땐 원모양으로 됐었음)