如何在Flutter中設置主屏幕的背景顏色？

我正在學習Flutter，我從非常基礎開始。我沒有使用MaterialApp。什麼是設置整個屏幕背景顏色的好方法？如何在Flutter中設置主屏幕的背景顏色？

這是我到目前爲止有：

import 'package:flutter/material.dart'; 

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

class MyApp extends StatelessWidget { 
    // This widget is the root of your application. 
    @override 
    Widget build(BuildContext context) { 
    return new Center(child: new Text("Hello, World!")); 
    } 
}

我的一些問題是：

什麼是背景色設置一個基本的方法是什麼？
我在屏幕上看到了什麼？哪個代碼「是」背景？有沒有什麼東西可以設置背景顏色？如果不是，什麼是簡單和適當的「簡單背景」（爲了繪製背景顏色）。

感謝您的幫助！

上面的代碼生成一個黑屏白字：

來源

2017-05-06 Seth Ladd

下面是我發現做這件事。我不知道是否有更好的方法，或者什麼是取捨。

Container「試圖儘可能大」，根據https://flutter.io/layout/。另外，容器可以採取decoration，其可以是BoxDecoration，其可以具有color（其爲背景顏色）。

下面是一個示例，它確實填充紅色屏幕，並提出「你好，世界！」進入中心：

import 'package:flutter/material.dart'; 

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

class MyApp extends StatelessWidget { 
    // This widget is the root of your application. 
    @override 
    Widget build(BuildContext context) { 
    return new Container(
     decoration: new BoxDecoration(color: Colors.red), 
     child: new Center(
     child: new Text("Hello, World!"), 
    ), 
    ); 
    } 
}

請注意，容器由MyApp build（）返回。容器有一個裝飾和一個孩子，這是中心文本。

看到它在這裏的行動：

來源

2017-05-06 20:07:14

如果你正在構建一個簡單的應用程序或不使用Material Design的應用程序，容器是一個不錯的選擇。如果你正在構建一個應用材料，如果你想在所有的畫布和卡片深色背景考慮使用ThemeData.dark（）。您也可以在使用cardColor和canvasColor參數的構造函數ThemeData卡和帆布背景顏色進行細粒度的控制。 https://docs.flutter.io/flutter/material/ThemeData/ThemeData.html –

我認爲你需要使用MaterialApp部件和使用theme並設置primarySwatch與你想要的顏色。看起來像下面的代碼，

import 'package:flutter/material.dart'; 

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

class MyApp extends StatelessWidget { 
    // This widget is the root of your application. 
    @override 
    Widget build(BuildContext context) { 
    return new MaterialApp(
     title: 'Flutter Demo', 
     theme: new ThemeData(
     primarySwatch: Colors.blue, 
    ), 
     home: new MyHomePage(title: 'Flutter Demo Home Page'), 
    ); 
    } 
}

來源

2017-11-17 11:35:48 iPatel

如何在Flutter中設置主屏幕的背景顏色？

回答

相關問題