J'ai un widget DataTable pour afficher certaines données au format tabulaire. Je n'ai pas réussi à trouver un moyen de changer la couleur d'arrière-plan de la DataColumn , elle est par défaut blanche.
J'ai essayé d'emballer l' label dans un Container mais cela n'aide pas puisque le conteneur prend les dimensions de l'enfant.
Existe-t-il un moyen plus simple de définir la couleur d'arrière-plan de `DataColum '?
Voici un code pour référence -
DataTable(
dataRowHeight: 70,
headingRowHeight: 60,
rows: List.generate(4, (index) {
return DataRow(
cells: <DataCell>[
DataCell(
Text("Number",),
),
DataCell(
Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
),
),
]
);
}),
columns: [
DataColumn(
label: Text("Name"),
),
DataColumn(
label: Text("Description"),
),
],
)
4 Réponses :
Container avec BoxDecoration -> Column / Row -> DataTable
Vous pouvez également utiliser la propriété gradient BoxDecoration .
Consultez ce tutoriel: YouTube
Exemple de code: GitHub
child: Container(
width: MediaQuery.of(context).size.width - 40.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12.0),
color: Color(0xff5a348b),
gradient: LinearGradient(
colors: [Color(0xffebac38), Color(0xffde4d2a)],
begin: Alignment.centerRight,
end: Alignment(-1.0, -2.0)), //Gradient
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Row(
children: <Widget>[
DataTable(
columns: <DataColumn>[
DataColumn(
label: Text(
'Storage',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
),
),
DataColumn(
label: Text(
'1TB',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 16.0,
),
),
),
],
rows: <DataRow>[
DataRow(cells: <DataCell>[
DataCell(
Text(
'Smart synchronization',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
),
),
DataCell(
Icon(
Icons.add,
color: Colors.white54,
),
),
]),
DataRow(cells: <DataCell>[
DataCell(
Text(
'Full text search',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
),
),
DataCell(
Icon(
Icons.edit,
color: Colors.white54,
),
),
]),
],
),
],
),
),
],
),
),
Je ne souhaite pas modifier l'arrière-plan de l'ensemble de DataTable . Je dois changer l'arrière-plan uniquement pour les en-têtes de tableau, c'est-à-dire les widgets DataColumn .
vous ne répondez pas à la question, il veut seulement changer la couleur d'arrière-plan de DataColumn
Pour tous ceux qui recherchent encore une réponse à cela, j'ai découvert que cela pouvait être fait en utilisant IntrinsicWidth , Stack et Container . J'ai modifié la hauteur en fonction de la question de thebuggycoder qui est de 60 . Comme le widget dataRowHeight par défaut du widget DataTable est kMinInteractiveDimension, vous pouvez le remplacer en conséquence!
IntrinsicWidth(
child: Stack(
children: [
Container(
height: 60, // default would be kMinInteractiveDimension
color: Colors.blue,
),
DataTable(
dataRowHeight: 70,
headingRowHeight: 60,
rows: List.generate(4, (index) {
return DataRow(cells: <DataCell>[
DataCell(
Text(
"Number",
),
),
DataCell(
Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
),
),
]);
}),
columns: [
DataColumn(
label: Text("Name"),
),
DataColumn(
label: Text("Description"),
),
],
),
],
),
)
Si vous souhaitez mettre en surbrillance votre colonne, au lieu de changer l'arrière-plan, changez la couleur du texte dans DataColumn.
Maintenant dans la version 1.22 de Flutter, vous pouvez le faire comme ceci
DataTable(
headingRowColor:
MaterialStateColor.resolveWith((states) => Colors.blue),
columns: [
DataColumn(),
DataColumn(),
],
rows: [
DataRow(
cells: [
DataCell(),
DataCell(),
],
),
],
)
Avez-vous trouvé la réponse à la question? J'ai besoin de réponse.