This is just to introduce the syntax for creating your own custom widget, which can be a combination of multiple widgets. I'm going to use a very basic example and just a Text Widget in a stateless widget.

 

By convention, you usually put every custom widget in its own file, so I'm going to create a file outside main.dart and call it question.dart.

 

 

 

 

inside question.dart, i'm going to create a stateless class and call it Question.

import 'package:flutter/material.dart';

class Question extends StatelessWidget {
  final String questionText;

  Question(this.questionText);

  @override
  Widget build(BuildContext context) {
    return Text(questionText);
  }
}

 

 

great now I can import this in my main.dart

Note***

You can have private properties and private classes in dart by adding a leading _

by adding a leading _, it makes your object or properties private which means they will not be accessible from outside the file.

 

I have no private class in this example so I'm going to head to my main.dart and import my new Widget.

 

import 'package:flutter/material.dart';
import 'question.dart';

 

great now I have access to my public classes and I can use them in this file. so let's replace the old Text widget with the new Question Widget.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var questionIndex = 0;

  void answerQuestion() {
    setState(() {
      questionIndex = questionIndex == 1 ? 0 : questionIndex + 1;
      print(questionIndex);
    });
  }

  @override
  Widget build(BuildContext context) {
    var questions = ["What's your name?", "What's your favorite color?"];

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My Title'),
        ),
        body: Column(
          children: [
            Question(questions.elementAt(questionIndex)), // THIS IS MY NEW WIDGET
            RaisedButton(
              child: Text('Answer 1'),
              onPressed: answerQuestion,
            ),
            RaisedButton(
              child: Text('Answer 2'),
              onPressed: answerQuestion,
            ),
            RaisedButton(
              child: Text('Answer 3'),
              onPressed: answerQuestion,
            ),
          ],
        ),
      ),
    );
  }
}

 

let's style the Question widget so it makes a bit more sense to have a separate widget for it:

 

In the code below I've wrapped the Text widget with a container in order to have access to a custom width, Text widget only takes the width of the text.

I've also used TextStyle to style my text by giving it a font size and aligning the text to the center. 

 

import 'package:flutter/material.dart';

class Question extends StatelessWidget {
  final String questionText;

  Question(this.questionText);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.all(10),
      child: Text(
        questionText,
        style: TextStyle(fontSize: 28),
        textAlign: TextAlign.center,
      ),
    );
  }
}

 

 

 

 

 

 

Note** 

Even though my Question widget is stateless, the content of it is a variable therefore when MyApp calls the build method it will be pass in the latest available questionIndex based on the user interaction.

remember setState() runs the build method every time you call it, and we call it when a change occurs. therefore the content of the Question widget can change from MyApp every time the user selects an option and moves to a new question