【Flutter】Imageの縦幅・横幅を変更

2022年12月15日

こんにちは、フラメルです。

今回はImageの縦幅・横幅を変更する方法を紹介します。

Imageの横幅を変更

imageの横幅を変更するにはwidthを使用します。

Image(
  image: NetworkImage(
    'https://images.unsplash.com/photo-1548199973-03cce0bbc87b',
  ),
  width: 250,
),

Imageの縦幅を変更

imageの縦幅を変更するにはheightを使用します。

Image(
  image: NetworkImage(
    'https://images.unsplash.com/photo-1517849845537-4d257902454a',
  ),
  height: 400,
),

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: Center(
          child: Image(
            image: NetworkImage(
              'https://images.unsplash.com/photo-1517849845537-4d257902454a',
            ),
            height: 400,
          ),
        ),
      ),
    );
  }
}

以上です。