Flutter 移动设备图像屏幕变大

Question

我目前正在使用 android studio flutter 来测试我的原型我设法运行我的模板成功地放到了移动设备上，但是模板太大了，我不知道如何缩小模板以便它适合屏幕

当你 select 这个 link 你可以看到它的样子:

mobile device image link

import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32,47);

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
  theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
  debugShowCheckedModeBanner: false,
  home: Scaffold(
    body: Center(
      child: Image.network("https://i.stack.imgur.com/deB5P.png", fit: Boxfit.fill),
    )
    title: 'Flutter Demo',
    // This is the theme of your application.
    //
    // Try running your application with "flutter run". You'll see the
    // application has a blue toolbar. Then, without quitting the app, try
    // changing the primarySwatch below to Colors.green and then invoke
    // "hot reload" (press "r" in the console where you ran "flutter run",
    // or simply save your changes to "hot reload" in a Flutter IDE).
    // Notice that the counter didn't reset back to zero; the application
    // is not restarted.
    primarySwatch: Colors.blue,
  ),
),
);

} }

Answer 1

您可以通过指定宽度和高度属性来使用框约束。如果您希望您的应用具有响应能力，您可以使用 MediaQuery. And for image you can use fit property like Image.asset("image", fit: BoxFit.cover), to know more about constants of BoxFit refer this.

import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: YourImage(),
    );
  }
}


class YourImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Image.asset("assets/images/logo.png", fit: BoxFit.fill),
      ),
    );
  }
}

Flutter 移动设备图像屏幕变大

Flutter mobile device image screen to large

mobile

dart

android-studio

flutter