CODEWITHSUNDEEP
flutterdartwidgetsyntax-errorflutter-dependencies
Tugba Ozkan
Tugba Ozkan

Reputation: 61

Flutter Error: The element type 'Button' can't be assigned to the list type 'Widget'

I dont know that why i give this error.I wrote the button.dart file ,here : 

 import 'package:flutter/material.dart';

class Button {
  double left;
  double top;
  String text;
  Button(this.text,this.top,
  this.left);

  Widget button(){
  return Positioned(
    left:left,

    top: top,
   child:Container(
          height: 54,
          width: 157,

          color: Colors.transparent,
          child:  Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(49))
            ),
            child:  Center(
            child:  Text(text,
            style: TextStyle(
              fontFamily: 'MontserratAlternates',
              fontStyle: FontStyle.normal,
              fontWeight: FontWeight.bold,
              fontSize: 20,
              letterSpacing: -0.02,
              color:Colors.black,

            ),
            ),
           )
         ),),
        );

  }
}

and i coded it in main.dart file but it doesn't work then i had an error "The element type Button can't be assigned to the list type 'Widget' " i can't understand that why i had this error . here is main.dart :

import 'package:flutter/material.dart';
import './number.dart';
import'./image.dart';
import './button.dart';
void main() {
  runApp(Main());
}

class Main extends StatelessWidget {

  @override 
  Widget build(BuildContext context){



    return MaterialApp(
      title: 'Main',
      home: Scaffold(
        body: Container(

          child: Stack(
          children:<Widget> [

            image(context),
            Number(),
            Button("Start",412,45),


          ],
      ),
        ),
    ),
    );
  }
}

the system is warning me so i should'nt wrote like mostly code.

Upvotes: 0

Views: 1796

Answers (2)

lobsta
lobsta

Reputation: 31

Your custom widgets should inherit from either StatefulWidget or StatelessWidget. By extending either of those, Flutter will recognize your class as a widget.

class Button extends StatelessWidget {
  final double left;
  final double top;
  final String text;

  Button(this.text, this.top, this.left);

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: left,
      top: top,
      child: Container(
        height: 54,
        width: 157,
        color: Colors.transparent,
        child: Container(
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(49))),
          child: Center(
            child: Text(
              text,
              style: TextStyle(
                fontFamily: 'MontserratAlternates',
                fontStyle: FontStyle.normal,
                fontWeight: FontWeight.bold,
                fontSize: 20,
                letterSpacing: -0.02,
                color: Colors.black,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Otherwise, if you want to do it with your button function, then you need to call that function after you create Button.

import 'package:flutter/material.dart';
import './number.dart';
import './image.dart';
import './button.dart';

void main() {
  runApp(Main());
}

class Main extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Main',
      home: Scaffold(
        body: Container(
          child: Stack(
            children: <Widget>[
              image(context),
              Number(),
              Button("Start", 412, 45).button(),
            ],
          ),
        ),
      ),
    );
  }
}

Upvotes: 2

Alex Collette
Alex Collette

Reputation: 1784

I would change your button class to look more like this:

class Button {
  double left;
  double top;
  String text;

  Widget button(this.text,this.top,this.left){
  return Positioned(
    left:left,

    top: top,
   child:Container(
          height: 54,
          width: 157,

          color: Colors.transparent,
          child:  Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(49))
            ),
            child:  Center(
            child:  Text(text,
            style: TextStyle(
              fontFamily: 'MontserratAlternates',
              fontStyle: FontStyle.normal,
              fontWeight: FontWeight.bold,
              fontSize: 20,
              letterSpacing: -0.02,
              color:Colors.black,

            ),
            ),
           )
         ),),
        );

  }
}

Then call that method like this:

import 'package:flutter/material.dart';
import './number.dart';
import'./image.dart';
import './button.dart';
void main() {
  runApp(Main());
}

class Main extends StatelessWidget {

  @override 
  Widget build(BuildContext context){



    return MaterialApp(
      title: 'Main',
      home: Scaffold(
        body: Container(

          child: Stack(
          children:<Widget> [

            image(context),
            Number(),
            button("Start",412,45),


          ],
      ),
        ),
    ),
    );
  }
}

Upvotes: 0

Related Questions