web-dev-qa-db-ja.com

FlutterでExpandedを含む背景色をコンテナーに追加する方法

Flutterのlayoutの問題に現在直面しています：/

背景色をcolumnウィジェットを埋め込んだコンテナに追加しますSizedBox ＆Expendedウィジェット。

レイアウトは色なしのチャームのように機能しますが、プロパティの色を追加するとエラーが表示されます:(

これがコードです：

Container(
  color: Colors.white // <- Not working when I add color property
  child: Expanded(
    child: Column(
      children: <Widget>[
        SizedBox(),
        Expanded()
      ],
    ),
  ),
),
SizedBox(),

ここにエラーがあります：

error

詳細については、これが達成したいレイアウトです。背景色を青いコンテナーに設定し、透明なものを下部のSizedBoxに設定します（オレンジ色の背景のグラデーションを表示するため）。

layout

よろしくお願いします!!

flutterlayoutflutter-layout
2
iStornZ

@iStormz、Container色に対して何をしているのかは正しいですが、Expandedの使用は正しくありません。 Expandedは、Row、ColumnまたはFlex内でのみ使用する必要があります。 Expanded外にColumnがあります。詳細はこちら- https://api.flutter.dev/flutter/widgets/Expanded-class.html

1
Pro

これがあなたが探しているレイアウトです。エキスパンドにはフレックスレイアウトが必要なため、発生するエラー。私はあなたが必要とする背景色天気と混同していますが、レイアウトは以下のコードで実現されています。必要に応じて背景色を削除できます

コード

import 'package:flutter/material.Dart';



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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
            child: Container(
                width: double.infinity,
                decoration: BoxDecoration(
                    gradient: LinearGradient(

                      begin: Alignment.topRight,
                      end: Alignment.bottomLeft,


                      colors: [

                        Color(0xffFFCE00),
                        Color(0xffE86F1C),
                      ],
                    ),
                    border: Border.all(
                        style: BorderStyle.solid, color: Colors.blue)),
                child: Column(
                  children: <Widget>[
                    SizedBox(
                      height: MediaQuery.of(context).size.height / 3,
                      child: Container(
                          color: Colors.blueAccent,//remove color to make it transpatrent
                          child: Center(child: Text("This is Sized Box"))),
                    ),
                    Expanded(
                      child: Container(
                          decoration: BoxDecoration(
                              color: Colors.blueAccent,//remove color to make it transpatent
                              border: Border.all(
                                  style: BorderStyle.solid,
                                  color: Colors.white)),
                          child: Center(child: Text("This is Expanded"))),
                    ),
                    SizedBox(
                      height: MediaQuery.of(context).size.height / 4,
                      child: Center(child: Text("This is Sized Box")),
                    ),
                  ],
                ))),
      ],
    );
  }
}

こちらがSSレイアウトです

Remove blue color if you need full transparent

よろしくお願いします。

1
HaSnen Tai