FlutterLogo可以拉伸填充吗？ [英] Can FlutterLogo be made to stretch-to-fill?

问题描述

我想在我的应用程序中显示一个大的FlutterLogo：

我相信我已经回答了类似的问题

如何拉伸图标以填充父级？

https：//docs.flutter。 io / flutter / widgets / Expanded-class.html

https://groups.google.com/forum/#!msg/flutter-dev/lsgdU1yl7xc/0pYS2qrzBQAJ

https://docs.flutter.io/颤动/摇摆ets / FittedBox-class.html

https://docs.flutter.io/flutter/painting/BoxFit-class.html

  new Expanded（
 child：new FittedBox（
 fit：BoxFit.fill，
 child：new FlutterLogo（style：FlutterLogoStyle.horizo​​ntal，textColor：Colors.white），
），
），
  

我觉得有点奇怪。查看OP配置文件ID，我想知道我是否正确回答了这个问题。

我希望这会有所帮助。

使用此代码运行

  import'package：flutter / material.dart'; 
 
类MyAppBar扩展了StatelessWidget {
 MyAppBar（{this.title}）; 
 
 // Widget子类中的字段始终标记为最终。 
 
最终小部件标题； 
 
 @override 
小部件build（BuildContext context）{
 return new Container（
 height：56.0，//以逻辑像素为单位
 padding：const EdgeInsets .symmetric（水平：8.0），
装饰：new BoxDecoration（color：Colors.blue [500]），
 // Row是水平，线性的布局。
 child：new Row（ 
 //< Widget>是列表中项目的类型。
子级：< Widget> [
 new IconButton（
 icon：new Icon（Icons.menu） ，
工具提示：导航菜单，
 onPressed：null，// null禁用按钮
），
 // Expanded扩展其子级以填充可用空间。 $ b new Expanded（
 child：title，
），
 new IconButton（
 icon：new Icon（Icons.search），
工具提示：'Search'， 
 onPressed：null，
），
]，
），
）； 
} 
} 
 
类MyScaffold扩展StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 //材质是概念性的UI出现在纸上。 
 return new Material（
 //列是垂直的线性布局。
子级：new Column（
子级：< Widget> [
 new MyAppBar（
标题：new Text（
'示例标题'，
样式：Theme.of（context）.primaryTextTheme.title，
），
），
 new Expanded（
子项：new FittedBox（
子项：BoxFit.fill，
子项：新FlutterLogo（样式：FlutterLogoStyle.horizo​​ntal，textColor：Colors.white），
） 
），
]，
），
）； 
} 
} 
 
 
 void main（）{
 runApp（new MaterialApp（
 title：'My app'，// used由OS任务切换器
主页：new MyScaffold（），
））； 
} 
  

编辑：我发布了完整的代码，只是为了深色，因为我忘了提到扩展的需要包装到行，列或flex容器中以进行扩展

I would like to display a large FlutterLogo in my app: https://docs.flutter.io/flutter/material/FlutterLogo-class.html

In order to account for varying screen sizes I would like to make it stretch-to fill. Is that possible? Or do I need to use a MediaQuery to determine the parent's size and pass that into FlutterLogo(size:)?

My current code:

  Widget build(BuildContext context) {
    return new Center(
      child: new FlutterLogo(size: 800.0, style: FlutterLogoStyle.horizontal, textColor: Colors.white),
    );
  }

解决方案

I believe I have answered a similar question

How to stretch an icon to fill parent?

https://docs.flutter.io/flutter/widgets/Expanded-class.html

https://groups.google.com/forum/#!msg/flutter-dev/lsgdU1yl7xc/0pYS2qrzBQAJ

https://docs.flutter.io/flutter/widgets/FittedBox-class.html

https://docs.flutter.io/flutter/painting/BoxFit-class.html

 new Expanded(
      child: new FittedBox(
        fit: BoxFit.fill,
        child: new FlutterLogo( style: FlutterLogoStyle.horizontal, textColor: Colors.white),
      ),
  ),

I feel kinda strange. Looking at the OP profile ID, I wonder if I answer the question correctly.

I hope this helps.

used this code to run it

import 'package:flutter/material.dart';

class MyAppBar extends StatelessWidget {
  MyAppBar({this.title});

  // Fields in a Widget subclass are always marked "final".

  final Widget title;

  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 56.0, // in logical pixels
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      decoration: new BoxDecoration(color: Colors.blue[500]),
      // Row is a horizontal, linear layout.
      child: new Row(
    // <Widget> is the type of items in the list.
    children: <Widget>[
      new IconButton(
        icon: new Icon(Icons.menu),
        tooltip: 'Navigation menu',
        onPressed: null, // null disables the button
      ),
      // Expanded expands its child to fill the available space.
      new Expanded(
        child: title,
      ),
      new IconButton(
        icon: new Icon(Icons.search),
        tooltip: 'Search',
        onPressed: null,
      ),
    ],
      ),
    );
  }
}

class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Material is a conceptual piece of paper on which the UI appears.
    return new Material(
      // Column is a vertical, linear layout.
      child: new Column(
    children: <Widget>[
      new MyAppBar(
        title: new Text(
          'Example title',
          style: Theme.of(context).primaryTextTheme.title,
        ),
      ),
      new Expanded(
        child: new FittedBox(
          fit: BoxFit.fill,
          child: new FlutterLogo( style: FlutterLogoStyle.horizontal, textColor: Colors.white),
        ),
      ),
    ],
      ),
    );
  }
}


void main() {
  runApp(new MaterialApp(
    title: 'My app', // used by the OS task switcher
    home: new MyScaffold(),
  ));
}

edit: I posted complete code just for darky, since I forgot to mention that expanded needs to be wrapped into row, column, or flex container to expand

这篇关于FlutterLogo可以拉伸填充吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！