flutter 이미지 업로드

flutter 로 이미지 업로드를 해볼려고 합니다.  그전에 간단히 몇가지 준비가 필요합니다

 

yaml 파일에가서 

 

assets:

이친구의 주석을 풀어 주셔야 합니다. 

 

 

2번째 파일을 만들어줘야하는대 1번째로  최상위 폴더에서 assets 폴더 생성후 images폴더를 만든다음 그안에 이미지를 넣어줘야합니다 

이름은 어떻게 해주든 상관이 없지만 통상적으로  assets 와 images 를 많이 쓴다고 합니다 

 

 

images 안에 이미지를 넣고 또 할일이 있습니다. 이건  좀 신기하긴한대 .yaml 에 다시 가서 assets: 주석을 푼 구간에가서 이미지 파일 이름을 올려줘야 합니다 이건 일일이 다해줘야합니다 

 

# To add assets to your application, add an assets section, like this:

assets:

- assets/images/dice-1.png

- assets/images/dice-2.png

- assets/images/dice-3.png

- assets/images/dice-4.png

- assets/images/dice-5.png

- assets/images/dice-6.png

그리고 - 앞에 띄어쓰기를 안해주면 경로를 인식못해 오류가 발생할수 있으니 꼭 들여쓰기를 신경써 줘야합니다.

너무 불편한대   * 를 써서 일괄로 처리 가능한가 찾아봤지만 

 

 

네그런거 젼혀 안됩니다.  여기서 햇갈릴수도 있습니다 일괄로 쓸려면 *가 아니라 그냥 빈공간으로 맞춰놔야합니다.

# To add assets to your application, add an assets section, like this:

assets:

- assets/images/

이것이 일괄로 폴더 다쓰는 방식입니다 다른언어들에서는 *가 일괄로 사용하는 문구인대 햇갈릴수도 있습니다.

 

이제 작성하던 코드로 넘어와서 이미지 추가하는 코드를 다시 작성해야합니다. 

child: Image.asset('assets/images/dice-2.png'),

이렇게 많이 쓰긴 합니다.

 

import 'package:flutter/material.dart';
import 'package:flutter_study_test/graient_container.dart';

void main() {
  runApp(const MyApp()); //엡구동  안에는 메인 페이지
}

class MyApp extends StatelessWidget {
  //엡 메인 페이지
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      //메인 페이지 디자인
      home: Scaffold(
        body: GradientContainer(
            Color.fromARGB(255, 36, 3, 94), Color.fromARGB(255, 147, 93, 240)),
      ),
    );
  }
}

 

import 'package:flutter/material.dart';
import 'package:flutter_study_test/styled_text.dart';

var statAlignment = Alignment.topLeft;
var endAlignment = Alignment.bottomRight;

class GradientContainer extends StatelessWidget {
  //아무것도 없는 위젯을 사용시 자동으로 뒤에서 이 클래스의 논리와,데이터를 많이 추가한다 플러터가 요구하는 데이터와 논리를 추가한다.
  const GradientContainer(
    this.color1,
    this.color2, {
    super.key,
  });

  const GradientContainer.purple({
    super.key,
  })  : color1 = Colors.deepPurple,
        color2 = Colors.indigo;

  final Color color1;
  final Color color2;

  @override
  Widget build(context) {
    return Container(
      //컨테이너
      decoration: BoxDecoration(
        //데코래이션
        gradient: LinearGradient(
          //그라데이션  하드코딩으로 기본적으로 리스트로 받아야함.
          colors: [color1, color2],
          // begin: Alignment.topLeft,
          // end: Alignment.bottomRight //그라데이션 begin 시작 end 끝
          //변수를 이용한 방법
          begin: statAlignment,
          end: endAlignment,
        ),
      ),
      child: Center(
        child: Image.asset('assets/images/dice-2.png'),
      ),
    );
  }
}

 

 

 

 

 

 

간단한 예제들은 모바일 에뮬레이터 보단 크롬으로 간단하게 돌리는게 컴파일상 빠르기 선호 하고 있습니다.