2017-09-01 97 views
0

我想在我的應用程序,以顯示大FlutterLogo: https://docs.flutter.io/flutter/material/FlutterLogo-class.htmlFlutterLogo可以拉伸填充嗎?

爲了考慮不同的屏幕尺寸,我想使它拉伸填滿。那可能嗎?或者我需要使用MediaQuery來確定父級的大小並將其傳遞給FlutterLogo(size :)?

我當前的代碼:

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

這篇文章可能有幫助 https://stackoverflow.com/questions/45817007/how-to-automatically-size-icons-in-flutter-to-be-as-big-as-possible – aziza

回答

0

enter image description here

我相信我已經回答了類似的問題

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

編輯:我貼出完整的代碼只是爲了黑人,因爲我忘了提,擴展需要被裹入行,列或柔性容器擴大了

+0

Won'工作。雖然容器尺寸合適,但圖標不會(也將居中)。 – Darky

+0

@Darky 奇怪的是我測試了上面的代碼,圖標填滿了父項。 – user1462442

+0

@ user142442啊,好像FlutterLogo的行爲與通常的Icon Widget不同。所以我的壞,忘了它。 – Darky

0

您可以用ConstrainedBox做到這一點:

screenshot

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