Reusable card widget with flutter

Question

I'm trying to replicate an Android app with Dart/Flutter that I already have a web version of written with PHP and Laravel. It has multiple sequentials screens that have the same components, like appbar, float button and a card to display contents of each screen. Using blade templates, is it possible to do something like:

<div class="card">
    @yeld('card_content')
</div>

And use it in others views with:

@section('card_content')
    <div class="table">
        {{$data}}
    </div>
@endsection

I know how to set a variable data in the constructor of the widget to be displayed, but how could I invoke a card widget and add children widgets to it, like in Laravel? Or should I copy the card code in every screen?

Answer 1

You have to define a new widget yourself and reuse the new widget whenever you need it. So just create a new Widget and return the card in the build function with the design you want to have it. For Example:

class MyPersonalCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(color: Colors.red, child: Text('This is a reusable card'),);
  }
}

Now you could use MyPersonalCard() as widget like you would use your Card() widgets at the places you want them to be. You could also make the color still customizable if you do something like this:

class MyPersonalCard extends StatelessWidget {
  final Color color;

  const MyPersonalCard({Key key, this.color = Colors.red}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(color: this.color, child: Text('This is a reusable card'),);
  }
}