I want to Do something like BorderRadius for a container, kind of Lost how to go about it as i am getting this Error

https://i.postimg.cc/nMbY0vyx/Screenshot-1664289375.png

How do i go about it? Starting out Flutter some days ago. I need some help with it. Source code looks like this :

import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';

import 'package:http/http.dart' as http;

class TransactionDetails {
  String? avatar;
  String? name;
  String? date;
  String? amount;

  TransactionDetails({
    this.avatar,
    this.name,
    this.date,
    this.amount,
  });

  TransactionDetails.fromJson(Map<String, dynamic> json) {
    avatar = json['avatar'];
    name = json['name'];
    date = json['date'];
    amount = json['amount'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    data['avatar'] = avatar;
    data['name'] = name;
    data['date'] = date;
    data['amount'] = amount;
    return data;
  }
}

Future<List<TransactionDetails>> fetchAlbum() async {
  final response = await http.get(Uri.parse(
      'https://brotherlike-navies.000webhostapp.com/people/people.php'));

  if (response.statusCode == 200) {
    final List result = json.decode(response.body);
    return result.map((e) => TransactionDetails.fromJson(e)).toList();
  } else {
    throw Exception('Failed to load data');
  }
}

class BaseScreen extends StatelessWidget {
  const BaseScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text(
            "My Bank",
            style: TextStyle(
                fontFamily: "Poppins",
                color: Colors.white,
                fontWeight: FontWeight.bold),
          ),
          leading: Padding(
            padding: const EdgeInsets.all(8.0),
            child: CircleAvatar(
              backgroundImage:
                  NetworkImage('https://placeimg.com/640/480/people'),
            ),
          ),
          actions: [
            IconButton(
                icon: Icon(Icons.notifications_active_outlined,
                    color: Colors.white, size: 27),
                onPressed: () {})
          ],
        ),
        body: SafeArea(
            child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              width: double.infinity,
              height: 150,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: [
                  Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(20))), // from here 
                    margin: const EdgeInsets.all(15),
                    width: 319,
                    height: 100,
                    color: Colors.green,
                    alignment: Alignment.center,
                    child: const Text(
                      '\$5200.00',
                      style: TextStyle(
                          fontSize: 15,
                          color: Colors.white,
                          fontWeight: FontWeight.bold),
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.all(15),
                    width: 319,
                    height: 100,
                    color: Colors.green,
                    alignment: Alignment.center,
                    child: const Text(
                      '\$1200.00',
                      style: TextStyle(
                          fontSize: 15,
                          color: Colors.white,
                          fontWeight: FontWeight.bold),
                    ),
                  ),
                  SizedBox(height: 24),
                ],
              ),
            ),
            Padding(
              padding: EdgeInsets.all(15),
              child: Text(
                "Recent Transactions",
                style: TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                    color: Colors.green),
              ),
            ),
            Center(
                child: FutureBuilder<List<TransactionDetails>>(
                    future: fetchAlbum(),
                    builder: (context, snapshot) {
                      if (snapshot.hasData) {
                        return ListView.builder(
                            shrinkWrap: true,
                            itemCount: snapshot.data!.length,
                            itemBuilder: (context, index) {
                              return ListTile(
                                leading: CircleAvatar(
                                  child: Image.network(
                                      snapshot.data![index].avatar.toString()),
                                ),
                                title:
                                    Text(snapshot.data![index].name.toString()),
                                trailing: Text(
                                    snapshot.data![index].amount.toString()),
                                subtitle:
                                    Text(snapshot.data![index].date.toString()),
                              );
                            });
                      } else if (snapshot.hasError) {
                        return Text('${snapshot.error}');
                      }
                      return const CircularProgressIndicator();
                    }))
          ],
        )));
  }
}

Like I said, i am fairly new to this,I need some Clarification here.

CodePudding user response：

The error refers, you can use either color or decoration on Container. BoxDecoration has a color parameter that can be used on Container color.

The color and decoration arguments cannot both be supplied, since it would potentially result in the decoration drawing over the background color. To supply a decoration with a color, use decoration: BoxDecoration(color: color).

Container(
  decoration: BoxDecoration(
    color: Colors.green,
    borderRadius: BorderRadius.all(
      Radius.circular(20),
    ),
  ), 
  margin: const EdgeInsets.all(15),
  width: 319,
  height: 100,
  alignment: Alignment.center,
  child: const Text(

More about Container and Container/color

CodePudding user response：

change this

 Container(
                decoration: BoxDecoration(
                 color: Colors.green, // if you using decoration color should be include in decoration
                    borderRadius: BorderRadius.all(Radius.circular(20))), // 
                margin: const EdgeInsets.all(15),
                width: 319,
                height: 100,
                alignment: Alignment.center,
                child: const Text(
                  '\$5200.00',
                  style: TextStyle(
                      fontSize: 15,
                      color: Colors.white,
                      fontWeight: FontWeight.bold),
                ),

CodePudding user response：

You cannot use the color parameter and the decoration parameter together.

it either you have this

  Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(20))), // from here 
                    margin: const EdgeInsets.all(15),
                    width: 319,
                    height: 100,
                    color: Colors.green,

but considering your case where you have to also use a box decoration, you'd have to remove the color property and place it in the decoration like this

  Container(
                    decoration: BoxDecoration(
                    color: Colors.green,
                        borderRadius:   BorderRadius.all(Radius.circular(20))), // from here 
                    margin: const EdgeInsets.all(15),
                    width: 319,
                    height: 100,

ensure you remove the previous color property