Question

我想在我的应用中显示一个大的FlutterLogo： https://docs.flutter.io/flutter/material/FlutterLogo-class.html

为了考虑不同的屏幕尺寸，我想让它拉伸 - 填充。那可能吗？或者我是否需要使用MediaQuery来确定父级的大小并将其传递给FlutterLogo（大小:)？

我目前的代码：

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

Answer 1

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

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),
      ),
  ),

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

我希望这会有所帮助。

使用此代码运行它

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(),
  ));
}

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

Answer 2

您可以使用ConstrainedBox：

完成此操作

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: new ThemeData.dark(),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('Example App')),
      body: new ConstrainedBox(
        constraints: new BoxConstraints.expand(),
        child: new FlutterLogo(
          style: FlutterLogoStyle.horizontal,
          textColor: Colors.white,
        ),
      ),
    );
  }
}

FlutterLogo可以拉伸填充吗？

2 个答案: