Flutter 移动设备图像屏幕变大

Question

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

p>

当您选择此链接时，您可以看到它的样子：

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。对于图像，您可以使用像 Image.asset("image", fit: BoxFit.cover), 这样的 fit 属性来了解有关 BoxFit 常量的更多信息，请参阅 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),
      ),
    );
  }
}