버튼

ElevatedButton

ElevatedButton : 기본적으로 그림자와 회색 배겨이 있는 플로팅 버튼입니다.

// 사용법
ElevatedButton(
  child: Text("normal"),
  onPressed: () {},
);

TextButton

TextButton : 배경이 투명하고 그림자가 없는 텍스트 버튼입니다.

TextButton(
  child: Text("normal"),
  onPressed: () {},
)

OutlineButton

OutlineButton : 테두리가 있고 그림자가 없으며 투명한 배경이 있습니다.

OutlineButton(
  child: Text("normal"),
  onPressed: () {},
)

IconButton

IconButton : 기본적으로 텍스트가 포함되지 않고 배경이 없는 클릭 가능한 아이콘

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {},
)

사진과 아이콘

사진

Flutter에서는 Image구성 요소를 통해 이미지를 로드하고 표시 Image할 수 있으며 데이터 소스는 자산, 파일, 메모리 및 네트워크가 될 수 있습니다.

1. 이미지 제공자
   ImageProvider 주로 이미지 데이터 획들을 위한 인터페이스를 정의하는 추상 클래스로 load(), 다른 데이터 소스에서 이미지를 가져오기 위해서는 다른 구현이 필요합니다. 예를 들어 Assets ImageProvider에서 이미지를 로드하는 ImageProvider가 구현되고 네트워크에서 이미지를 로드하는 ImageProvider가 구현 됩니다.

2. 이미지

Image위젯에는 이미지 제공자에 해당하는 필수 매개변수가 있습니다. 아래에서는 assets와 네트워크에서 각각 이미지를 로드하는 방법을 보여줍니다.

//  assets
Image(
  image: AssetImage("images/avatar.png"),
  width: 100.0
);

// 네트워크
Image(
  image: NetworkImage(
      "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
  width: 100.0,
)

3. 이미지 매개 변수

• width,height : 이미지 너비와 높이를 설정하는데 사용 되며, 지정하지 않을경우 부모 컨테이너에 맞게 작업됩니다.
• fit : 그림 표시 공간과 그림 자체의 크기가 다른 경우 그림의 적응 모드를 지정하는데 사용 됩니다.
  • fill : 디스플레이 공간을 채우도록 늘어나며, 그림 자체의 종횡비가 변경되고 그림이 변형됩니다.
  • cover : 사진의 종횡비에 따라 확대된 후 중앙에 채워져 표시공간을 채우며, 화면이 변형되지 않고 표시공간을 벗어난 부분은 잘립니다.
  • contain : 이것은 그림의 기본 적응 규칙으로 그림 자체의 화면 비율이 변경되지 않고 그림이 변형되지 않는 조건에서 현재 표시 공간에 맞게 그림이 조정됩니다.
  • fitWidth : 그림의 너비는 표시 공간의 너비에 맞게 조정되고 높이는 비례적으로 조정된 다음 중앙에 표시되며 그림은 변형되지 않으며 표시 공간을 초과하는 부분은 잘립니다.
  • fitHeight : 그림의 높이가 표시 공간의 높이에 맞게 조정되고 너비가 비례하여 조정된 다음 중앙에 표시되며 그림이 변형되지 않고 표시 공간을 초과하는 부분이 잘립니다.
  • none : 그림에 적응 전략이 없으며 그림이 디스플레이 공간에 표시됩니다.그림이 디스플레이 공간보다 클 경우 디스플레이 공간에는 그림의 중간 부분만 표시됩니다.

fit 효과 이미지

• color,colorBlendMode : 그림을 그릴 때 각 픽셀에 대해 색상 혼합 처리를 수행 color하고 혼합 색상을 colorBlendMode지정하고 혼합 모드를 지정할 수 있습니다.

Image(
  image: AssetImage("images/avatar.png"),
  width: 100.0,
  color: Colors.blue,
  colorBlendMode: BlendMode.difference,
);

4. 이미지 캐시
   Flutter 프레임워크에는 로드된 이미지에 대한 캐시가 있습니다. 자세한 내용은 추후에 설명하도록 하겠습니다.

아이콘

Flutter에서는 웹 개발처럼 iconfont를 사용할 수 있는데 iconfont는 "글꼴 아이콘"으로 아이콘을 글꼴 파일로 만든 다음 다른 문자를 지정하여 다른 그림을 표시하는 것입니다.
iconfont 장점

• 설치 패키지 크기를 줄일 수 있습니다.
• iconfont는 모두 벡터 아이콘이며 확대해도 선명도에 영향을 미치지 않습니다.
• 텍스트 스타일을 적용할 수 있습니다. 색상,크기,정렬등 텍스트처럼 변경이 가능합니다.
• TextSpan을 통해 텍스트와 혼합할 수 있습니다.

1. 머터리얼 디자인 글꼴 아이콘 사용

flutter:
    uses-material-design: true

String icons = "";
// accessible: 0xe03e
icons += "\uE03e";
// error:  0xe237
icons += " \uE237";
// fingerprint: 0xe287
icons += " \uE287";

Text(
  icons,
  style: TextStyle(
    fontFamily: "MaterialIcons",
    fontSize: 24.0,
    color: Colors.green,
  ),
);

2. 사용자 정의 글꼴 아이콘 사용

• 글꼴 아이콘 파일 가져오기

fonts:
    - family: myIcon # 커스텀 글꼴
      fonts:
          - asset: fonts/iconfont.ttf

• 모든 아이콘을 정적 변수로 정의

class MyIcons{
  // book 아이콘
  static const IconData book = const IconData(
      0xe614,
      fontFamily: 'myIcon',
      matchTextDirection: true
  );
  // 채팅 아이콘
  static const IconData wechat = const IconData(
      0xec7d,
      fontFamily: 'myIcon',
      matchTextDirection: true
  );
}

• 사용

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(MyIcons.book,color: Colors.purple),
    Icon(MyIcons.wechat,color: Colors.green),
  ],
)