how to avoid duplicate codes in flutter?

Question

for example I have a file (first.dart) and it has a code like this :

  @override
Widget build(BuildContext context) {
return Scaffold(
  body: Column(
    children: [
      Text('one'),
      Text('two'),
      Text('three'),
    ],
  ),
);
}

and I have a another file (second.dart) which has a similar codes like the first file but a very little different codes like this :

  @override
Widget build(BuildContext context) {
return Scaffold(
  body: Column(
    children: [
      Text('one'),
      Text('two'),
      Text('four'),
    ],
  ),
);
}

and I don't want to have a same codes using two places and maybe in future there was a change needed there I don't want to go to both 2 files and change them both instead change in one place and both get change , is there any idea please ?

Answer 1

The "Flutter-Way" of structuring your Widgets is by implementing Sub-Widgets and pass the varying parts as props into them.

In your example, you could pass the children array as a List property into a wrapper Widget with the scaffold and column. As an alternative you could pass the texts directly as a List property and then map the array to your Text-Widgets if they always have the same layout just with different text.

In the end it is up to you, how you structure your Widget-Tree in detail. Always try to minimize complexity and pass only the necessary props. Just start trying, you can still optimize the code later when you have a more extensive you of your requirements.

If I'm not sure about the final structure yet, I often start by putting everything into one widget and then outsource the contents to Sub-Widget when things start to repeat.

You can also look up Flutter Best Practices to dive further into the topic of structuring your code.

Answer 2

So, yes, this is a big issue. There will be many instances when you have to write repeated code if you don't know how to make centric file for that which you can customize for each screen.

Here, I'm explaining you will buttonWidget example.

import 'package:flutter/material.dart';

class ButtonWidget extends StatefulHookConsumerWidget {
  final Widget buttonTitle;
  final Function onPressed;
  final ButtonStyle? style;
  const ButtonWidget(
      {required this.buttonTitle,
      required this.onPressed,
      this.style,
      Key? key})
      : super(key: key);

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _ButtonWidgetState();
}

class _ButtonWidgetState extends ConsumerState<ButtonWidget> {
  @override
  Widget build(BuildContext context) {
    return 
      child: ElevatedButton(
        onPressed: () async {
          await widget.onPressed();
        },
        style: widget.style ?? ButtonStyle(),
        child: widget.buttonTitle,
    );
  }
}

Here how you can call this

ButtonWidget(
        buttonTitle: Text('My title),
        onPressed: () async {/*do something*/}
),

OR

ButtonWidget(
            buttonTitle: Text('My title),
            onPressed: () async {/*do something*/},
            style: ButtonStyle(...),
    ),