My costume widget is not showing in a Column-CodePudding

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

CodePudding user response：

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

CodePudding user response：

You can wrap the FractionallySizedBox with Expanded to get available height and then heightFactor will be used its child

body: Container(
  child: Column(
    children: [
      Container(
        child: new Text("hello"),
      ),
      Expanded(
        child: FractionallySizedBox(
          widthFactor: 1,
          heightFactor: 0.3,
          child: Container(
            
          ),
        ),
      )
    ],
  ),
),

Also you might be interested on LayoutBuilder