Flutter로 Button 배경에 이미지 설정
3874 단어 Dartflutter_webFlutter
하고 싶은 일
Flutter의 Button 구성 요소에 배경 이미지를 설정하여 이미지 버튼을 만들고 싶습니다.
이 이미지를 배경으로 Button을 만듭니다.
(어째서 젠켄인가는 비밀)
어떻게
Background와 같은 옵션은 보이지 않았으므로 child에 이미지를 설정하여 구현합니다.
구현
import 'package:flutter/material.dart';
import 'package:janken/gen/assets.gen.dart';
typedef void IncrementCallback();
class IncrementButton extends StatelessWidget {
const IncrementButton(this._increment);
final IncrementCallback _increment;
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: this._increment,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
color: Colors.orange,
child: Container(
width: 180,
height: 180,
decoration: BoxDecoration(
image: DecorationImage(
// Assets.images.janken.trianglePng.path には 画像Path が入る
image: AssetImage(Assets.images.janken.trianglePng.path),
fit: BoxFit.scaleDown),
),
),
);
}
}
한 가지
이해하면 '그렇게'일지도 모르지만, 이해할 때까지는 방향성이 잡히지 않고 고생할 것 같다.
Reference
이 문제에 관하여(Flutter로 Button 배경에 이미지 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tktcorporation/items/a7946e0e0e9b07d76572
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Background와 같은 옵션은 보이지 않았으므로 child에 이미지를 설정하여 구현합니다.
구현
import 'package:flutter/material.dart';
import 'package:janken/gen/assets.gen.dart';
typedef void IncrementCallback();
class IncrementButton extends StatelessWidget {
const IncrementButton(this._increment);
final IncrementCallback _increment;
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: this._increment,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
color: Colors.orange,
child: Container(
width: 180,
height: 180,
decoration: BoxDecoration(
image: DecorationImage(
// Assets.images.janken.trianglePng.path には 画像Path が入る
image: AssetImage(Assets.images.janken.trianglePng.path),
fit: BoxFit.scaleDown),
),
),
);
}
}
한 가지
이해하면 '그렇게'일지도 모르지만, 이해할 때까지는 방향성이 잡히지 않고 고생할 것 같다.
Reference
이 문제에 관하여(Flutter로 Button 배경에 이미지 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tktcorporation/items/a7946e0e0e9b07d76572
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Flutter로 Button 배경에 이미지 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tktcorporation/items/a7946e0e0e9b07d76572텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)