6
4

More than 3 years have passed since last update.

【Flutter】ContainerのプロパティcolorとBoxDecorationのプロパティcolorは共存させてはいけない

Posted at

背景

下記のコードで、Containerのプロパティdecorationを使って、角丸にしようとした。

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color(0xFF333333),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(4.0)),
        color: Color.white,
        border: Border.all(color: Colors.black),
      ),
    );
  }

しかし下記のエラーが発生した。

エラー

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
Cannot provide both a color and a decoration
To provide both, use "decoration: BoxDecoration(color: color)".
'package:flutter/src/widgets/container.dart':
Failed assertion: line 285 pos 15: 'color == null || decoration == null'
The relevant error-causing widget was: 

════════════════════════════════════════════════════════════════════════════════════════════════════
Reloaded 5 of 690 libraries in 1,640ms.

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
A RenderFlex overflowed by 99555 pixels on the bottom.
The relevant error-causing widget was: 
  Column file:~~~~
════════════════════════════════════════════════════════════════════════════════════════════════════

エラー分によると、Containerのプロパティcolorと、BoxDecorationのcolorは共存してはいけないと行く事らしい。
という事で、BoxDecorationのcolorの方を残した。

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(4.0)),
        color: Color(0xFF333333),
        border: Border.all(color: Colors.black),
      ),
    );
  }

これでエラーが解消された。

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4