Can FlutterLogo be made to stretch-to-fill?

问题:

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

回答1:

You can accomplish this with a 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,
        ),
      ),
    );
  }
}

回答2:

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