1
votes

Besoin d'aide pour créer un widget réutilisable en flutter

Je crée donc une application avec des scintillements. Donc, dans le fichier main.dart , je crée un composant qui est essentiellement un tas de widgets encapsulés. Je dois utiliser ce composant plusieurs fois, j'ai donc pensé à créer ces composants réutilisables dans un autre fichier de fléchettes, puis à les importer dans main.dart .

Voici mon code pour reusable.dart

ListView(
   children: children: <Widget>[
      TileData(
          children: <Widget>[
               Text('Element 1'),
]),
      TileData(
          children: <Widget>[
               Text('Element 2'),
]),
      TileData(
          children: <Widget>[
               Text('Element 3'),
],
)
],
),

Je prévois d'utiliser ce widget TileData dans mon main.dart de cette manière

import 'package:flutter/material.dart';

double mainTab = 150;

class TileData extends StatefulWidget {
  @override
  _TileDataState createState() => _TileDataState();
}

class _TileDataState extends State<TileData> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200 - 15.0,
      width: mainTab - 10.0,
      child: Padding(
        padding: const EdgeInsets.fromLTRB(10, 15, 0, 0),
        child: Column(

        ),
      ),
    );
  }
}

flutter flutter-widget

0 commentaires

3 Réponses :

3
votes

Créez une propriété et utilisez-la comme argument dans le constructeur du widget réutilisable.

Column(
  children: widget.children
)

Ensuite, dans votre méthode de construction, transmettez la propriété à la colonne.

final List<Widget> children;

TileData({this.children});

0 commentaires

3
votes

TileDate

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:test/widgets/TileData.dart';

void main() => runApp(MaterialApp(
      home: Scaffold(backgroundColor: Color(0xFF2d3447), body: MyApp()),
    ));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        TileData(
          widgetsList: [Text("Element 1")],
        ),
        TileData(
          widgetsList: [Text("Element 2")],
        ),
        TileData(
          widgetsList: [Text("Element 3")],
        )
      ],
    );
  }
}

main

import 'package:flutter/material.dart';

double mainTab = 150;

class TileData extends StatefulWidget {
  List<Widget> widgetsList;
  TileData({this.widgetsList});

  @override
  _TileDataState createState() => _TileDataState();
}

class _TileDataState extends State<TileData> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200 - 15.0,
      width: mainTab - 10.0,
      child: Padding(
        padding: const EdgeInsets.fromLTRB(10, 15, 0, 0),
        child: Column(
          children: widget.widgetsList,
        ),
      ),
    );
  }
}

De cette façon, vous pouvez réutiliser

0 commentaires

0
votes

Vous pouvez utiliser ListView.builder()

add Constructor dans votre widget TileData

quelque chose comme

ListView.builder(
itemCount:data.length,
itemBuilder: (context,index){
return TileData(data:"Element $index");
}

)

0 commentaires