मैं फ़्लटर में अपनी मुख्य स्क्रीन की पृष्ठभूमि का रंग कैसे सेट करूं?

Question 1

मैं स्पंदन सीख रहा हूं, और मैं बहुत मूल बातों से शुरू कर रहा हूं। मैं MaterialApp का उपयोग नहीं कर रहा हूँ। पूरे स्क्रीन का बैकग्राउंड कलर सेट करने का अच्छा तरीका क्या है?

यहाँ मेरे पास अभी तक क्या है:

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!"));
  }
}

मेरे कुछ प्रश्न हैं:

पृष्ठभूमि का रंग सेट करने का एक मूल तरीका क्या है?
मैं वास्तव में स्क्रीन पर क्या देख रहा हूं? कौन सा कोड "" पृष्ठभूमि है? क्या पृष्ठभूमि का रंग सेट करने के लिए एक चीज है? यदि नहीं, तो एक सरल और उपयुक्त "सरल पृष्ठभूमि" (पृष्ठभूमि रंग को चित्रित करने के लिए) क्या है।

सहायता के लिए धन्यवाद!

उपरोक्त कोड सफेद पाठ के साथ एक काली स्क्रीन उत्पन्न करता है:

Question 2

मुझे लगता है कि आप सफेद पृष्ठभूमि को करने के लिए एक मचान का उपयोग भी कर सकते हैं। यहाँ कुछ कोड है जो मदद कर सकता है।

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  @override
    Widget build(BuildContext context) {

      return new MaterialApp(
        title: 'Testing',
        home: new Scaffold(
        //Here you can set what ever background color you need.
          backgroundColor: Colors.white,
        ),
      );
    }
}

आशा है कि यह मदद करता है 😊

Question 3

आप एक बार में सभी स्कैफोल्ड में पृष्ठभूमि रंग सेट कर सकते हैं।

बस scaffoldBackgroundColor सेट करें : ThemeData में

 MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(scaffoldBackgroundColor: const Color(0xFFEFEFEF)),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );

Question 4

यहाँ एक तरीका है जो मुझे ऐसा करने के लिए मिला। मुझे नहीं पता कि क्या बेहतर तरीके हैं, या व्यापार-बंद क्या हैं।

कंटेनर "जितना संभव हो उतना बड़ा होने की कोशिश करता है", 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 बिल्ड () द्वारा लौटाया गया है। कंटेनर में एक सजावट और एक बच्चा है, जो केंद्रित पाठ है।

इसे यहां कार्रवाई में देखें:

Question 5

इसे करने के कई तरीके हैं, मैं यहां कुछ सूचीबद्ध कर रहा हूं।

का उपयोग करते हुए backgroundColor

Scaffold(
  backgroundColor: Colors.black,
  body: Center(...),
)

में उपयोग कर रहा ContainerहैSizedBox.expand

Scaffold(
  body: SizedBox.expand(
    child: Container(
      color: Colors.black,
      child: Center(...)
    ),
  ),
)

का उपयोग करते हुए Theme

Theme(
  data: Theme.of(context).copyWith(scaffoldBackgroundColor: Colors.black),
  child: Scaffold(
    body: Center(...),
  ),
)

Question 6

Scaffold(
      backgroundColor: Constants.defaulBackground,
      body: new Container(
      child: Center(yourtext)

      )
)

Question 7

स्पंदन के मूल उदाहरण पर आप backgroundColor: Colors.Xपाड़ के साथ सेट कर सकते हैं

  @override
 Widget build(BuildContext context) {
   // This method is rerun every time setState is called, for instance as done
  // by the _incrementCounter method above.
   //
  // The Flutter framework has been optimized to make rerunning build methods
   // fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
  backgroundColor: Colors.blue,
  body: Center(
    // Center is a layout widget. It takes a single child and positions it
    // in the middle of the parent.
    child: Column(
      // Column is also layout widget. It takes a list of children and
      // arranges them vertically. By default, it sizes itself to fit its
      // children horizontally, and tries to be as tall as its parent.
      //
      // Invoke "debug painting" (press "p" in the console, choose the
      // "Toggle Debug Paint" action from the Flutter Inspector in Android
      // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
      // to see the wireframe for each widget.
      //
      // Column has various properties to control how it sizes itself and
      // how it positions its children. Here we use mainAxisAlignment to
      // center the children vertically; the main axis here is the vertical
      // axis because Columns are vertical (the cross axis would be
      // horizontal).
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'You have pushed the button this many times:',
        ),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.display1,
        ),
      ],
    ),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: _incrementCounter,
    tooltip: 'Increment',
    child: Icon(Icons.add_circle),
  ), // This trailing comma makes auto-formatting nicer for build methods.
);
}

Question 8

आपको स्कैफोल्ड विजेट वापस करना चाहिए और अपना विजेट अंदर जोड़ना चाहिए स्कैफोल्ड के

इस कोड के रूप में चूसना:

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 Scaffold(
          backgroundColor: Colors.white,
          body: Center(child: new Text("Hello, World!"));
    );
  }
}

Question 9

मुझे लगता है कि आपको 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'),
    );
  }
}

Question 10

और यह पृष्ठभूमि का रंग बदलने के लिए एक और तरीका है:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: Scaffold(backgroundColor: Colors.pink,),);
  }
}