Flutter 移动设备图像屏幕变大

Posted 2023-02-23

【中文标题】Flutter 移动设备图像屏幕变大

【英文标题】：Flutter mobile device image screen to large

【发布时间】：2021-06-03 05:04:14

【问题描述】：

我目前正在使用 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,
  ),
),
);

【参考方案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),
      ),
    );
  

【讨论】：

谢谢我是新来使用android studio 我想问我是否把你给我的代码放在哪里我必须把它具体放在哪里我必须把它放在“pubspec.yaml”中? :)

不，对于框约束，您不必对 pubspec.yaml 做任何事情。

我是否将特定代码写入“main.dart”:)

您能否提供更多信息，例如您使用过的一些代码 sn-p？这将有助于准确了解您面临的问题。

对于你看到的那张图片，我写了“home: Question1()”，（Question1”是你在移动设备中看到的图片）我在写完之后在“main.dart”中写的代码我运行了程序我在这里发布的图像你看到的移动设备和模板太大了这是我第一次运行程序时看到的