2017-09-01 1 views
0

Ich möchte eine große FlutterLogo in meiner app anzuzeigen: https://docs.flutter.io/flutter/material/FlutterLogo-class.htmlKann FlutterLogo gemacht werden, um zu strecken?

Um für verschiedene Bildschirmgrößen zu berücksichtigen ich es füllen streck machen möchten. Ist das möglich? Oder muss ich eine MediaQuery verwenden, um die Größe des übergeordneten Elements zu ermitteln und diese in FlutterLogo (Größe :) zu übergeben?

Mein aktueller Code:

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

Dieser Beitrag kann hilfreich sein https://stackoverflow.com/questions/45817007/wie-zu-automatisch-size-icon-in-flutter-to-be-as-big-as-possible – aziza

Antwort

0

enter image description here

Ich glaube, ich beantwortet haben eine ähnliche Frage

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

Ich fühle mich irgendwie seltsam. Mit Blick auf die OP-Profil-ID frage ich mich, ob ich die Frage richtig beantworte.

Ich hoffe, das hilft.

verwendeten diesen Code es

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

bearbeiten auszuführen: Ich stellte vollständigen Code nur für darky, da ich, dass ein erweiterter Bedarf zu erwähnen vergaß in Reihe gewickelt wird, Spalt oder Flex Container zu erweitern

+0

Won ' t arbeiten. Während der Container richtig dimensioniert wird, wird das Symbol nicht zentriert. – Darky

+0

@Darky seltsam Ich habe den obigen Code getestet und das Symbol füllte die Eltern. – user1462442

+0

@ user142442 ach, scheint wie FlutterLogo anders als das übliche Icon Widget zu handeln. Also mein Schlechter, vergiss es. – Darky

0

Sie erreichen dies mit einem 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, 
     ), 
    ), 
    ); 
    } 
} 
Verwandte Themen