Creating a Widget with Props

Building Reusable Widgets with Flutter

19 November, 2022

Contributors

Noelle Szomb

@noelle

If you haven't done so already, create a Flutter app by following the steps outlined here: https://docs.flutter.dev/get-started/codelab#step-1-create-the-starter-flutter-app

Brief

Let's assume we are building an event app for a local event center and we've received the following design:

Right off the bat, we know we want to create a reusable event widget to display each upcoming event.

1. Create a class for our Widget

We extend StatelessWidget because our widget is not going to have any internal state that changes. It will only be displaying the information that is passed to it.

Things to keep in mind while building widgets:

Every class has an @override method which is comparable to React's @render method
the Widget keyword defines what type will be returned. If you've used typescript, this will look familiar to you
the return is where you will be returning your widgets, similar to where you'd put your JSX in React

Here I'm creating a class called EventCard that builds off of the basic structure of a StatelessWidget. If you're familiar with class-based React, this might be familiar to you. Feel free to skip ahead.

// project_root/lib/main.dart

class EventCard extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return ...
  }
}

2. Define the Widget's Props

We need 3 things for our component: Artist name, date of event, and show time. For the purposes of the tutorial, we'll assume these are all being passed in as formatted strings.

In React with Typescript our event card might look like this:


// define our Prop Types
interface EventCardProps {
  name: String;
  date: String;
  time: String;
}

// ({...}) accepting our props in the component
const EventCard = ({ name, date, time }: EventCardProps) => {
  
  return (...)
}

in flutter, this same Widget would equate to:

// project_root/lib/main.dart

class EventCard extends StatelessWidget {
  
  // define our Prop Types
  final String name;
  final String date;
  final String time; 
  
  
  // "accepting" our props in the widget
  const EventCard({
    Key? key,
    required this.name,
    required this.date,
    required this.time
  }) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return ...
  }
}

3. Return a Widget

Next, let's display our information. We're going to use the barebones components, but you can add styles as much as you want.

// project_root/lib/main.dart

class EventCard extends StatelessWidget {
  
  // define our Prop Types
  final String name;
  final String date;
  final String time; 
  
  
  // "accepting" our props in the widget
  const EventCard({
    Key? key,
    required this.name,
    required this.date,
    required this.time
  }) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(name),
        Text(date),
        Text("Doors @ $time") // formatted string with variable in Dart
      ]
    )
  }
}

4. Use your Widget

Now our widget is built and we can reuse it as many times as we want, passing in different information every time.

// project_root/lib/main.dart

// Let's render our widget in the main scaffold
class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          EventCard(name: "Madonna", date: "Nov. 2", time: "6:30"),
          EventCard(name: "Post Malone", date: "Dec. 10", time: "7:30"),
          EventCard(name: "The Lumineers", date: "Dec. 15", time: "7:00")
        ]
      ),
    );
  }
}

mobile

flutter

develevate

howto