My costume widget is not showing in a Column

November 8, 2022

So i have created a costume widget and i wanted to show it in a column, but whenever i put it in a column and run the application the widget doesn’t show on the screen.

This is my costume Widget

@override
  Widget build(BuildContext context) {
    return new FractionallySizedBox(
              widthFactor: 1,
              heightFactor: 0.3,
              child: Container(
                child: new LineChart(linechartData()),
                margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
              ),
            );
  }

and this is my main.dart widget

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: new Text("hello"),
        ),
        body: new Container(
            child: new Column(
          children: [
            new Container(child: new Text("hello")),          
            new Chart()],
        )),
      ),
    );
  }
}

Ive tried to check if the problem is with the column widget by removing my costume widget from the column widget and by putting a text widget but the text widget shows fine the problem is when i add my costume widget inside it that everything desapears

>Solution :

You need to wrap your widget inside the Flexible one, like this:

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: new Text("hello"),
        ),
        body: new Container(
            child: new Column(
          children: [
            new Flexible(child: Costume()),
            new Chart()],
        )),
      ),
    );
  }
}

CHeckout FractionallySizedBox (Flutter Widget of the Week) video