My screen is not jumping to the next screen as required - flutter

I am using RawMaterialButton and I need to switch screen when the button is pressed, but it is not switching?
Here is my code - first Screen:
Widget _buildListItem(String picture) {
return Row(
children: <Widget>[
Row(
children: <Widget>[
Container(
height: 100.0,
width: 130.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(picture),
fit: BoxFit.cover
),
borderRadius: BorderRadius.only(topRight: Radius.circular(10.0), bottomRight: Radius.circular(10.0))),
),
SizedBox(width: 10.0),
Container(
height: 120.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Maple Mustard Tempeh',
style: TextStyle(
fontSize: 15.0,
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold
),
),
SizedBox(height: 5.0),
Text('Marinated kale, onion, tomato and roasted',
style: TextStyle(
fontSize: 11.0,
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey
),
),
Text('garlic aioli on grilled spelt bread',
style: TextStyle(
fontSize: 11.0,
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey
),
),
SizedBox(height: 10.0),
Row(
children: <Widget>[
Text('\u20B9 11.25',
style: TextStyle(
fontSize: 20.0,
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey
),
),
SizedBox(width: 60.0,),
Cbutton(onPressed: ()=> item_details()),
],
),
],
),
),
],
),
],
);
}
RawMaterialButton
return new RawMaterialButton(
fillColor: Colors.green,
splashColor: Colors.greenAccent,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20.0,
vertical: 8.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: const <Widget>[
Icon(
Icons.add,
color: Colors.white,),
SizedBox(width: 8.0,),
Text("Add", style: TextStyle(
color: Colors.white
),),
],
),
),
onPressed: onPressed,
shape: StadiumBorder(),
);
}
}

If you want to change screens, you can user Navigator.
onPressed: () {
Navigator.push( context, MaterialPageRoute(
builder: (context) => SecondScreen()
));
}

Related

How to make responsive content in Container Flutter

How can I make the responsive Content in Container,
when I put anything in a container and the Height content is oversize what is the solution for this? I need to fix it when the user input too much information about the post and I warp it with less/more plugins and when the user uses it the screen is over pixel for sure
I use media query on the container that means I fix the size is okay so it's will happen if too much text
Widget _postWidget() {
return Container(
height: MediaQuery.of(context).size.height * 0.40,
width: MediaQuery.of(context).size.width * 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
flex: 1,
child: Container(
height: 45, //height, //155,
width: 45, //width, //155,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: const Color(0xff7c94b6),
image: DecorationImage(
image: NetworkImage(''),
fit: BoxFit.cover,
),
),
),
),
Expanded(
flex: 6,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
RichText(
text: TextSpan(
text: '[C]post.username ',
style: TextStyle(
color: Colors.black,
fontFamily: 'SukhumvitSetBold',
fontWeight: FontWeight.bold),
children: const <TextSpan>[
TextSpan(
text: '3h',
style: TextStyle(
color: Colors.grey,
fontFamily: 'SukhumvitSetBold',
fontWeight: FontWeight.w400)),
],
),
),
Text(
'[user]Desuka',
style: TextStyle(
color: Colors.grey[500],
fontFamily: 'SukhumvitSetMedium',
),
)
],
),
),
),
Expanded(
flex: 2,
child: SizedBox(
width: 200.0,
height: 30.0,
child: OutlinedButton(
child: Text(
'Join+',
style: TextStyle(
color: HexColor("7225FF"),
),
),
onPressed: () => print("it's pressed"),
style: ElevatedButton.styleFrom(
side: BorderSide(
width: 1.5,
color: HexColor("7225FF"),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
))),
],
),
),
),
InkWell(
child: Container(
margin: const EdgeInsets.only(
top: 10,
bottom: 10,
right: 20,
left: 20,
),
width: double.infinity,
height: 170.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.0),
image: DecorationImage(
image: NetworkImage(
'https://gitlab.com/2Shours/alphapic/raw/master/22.jpeg'),
fit: BoxFit.cover,
),
),
),
),
SizedBox(
height: 5,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Column(
children: [
Text(
'Travis Scott x Nike Fregment',
style: TextStyle(
color: Colors.black,
fontFamily: 'SukhumvitSetBold',
fontSize: 16,
fontWeight: FontWeight.bold),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Column(
children: [
ReadMoreText(
'The Flutter framework builds its layout via the composition of widgets, everything that you construct programmatically is a widget and these are compiled together to create the user interface. ',
style: TextStyle(
color: Colors.black,
fontSize: 15,
fontFamily: 'SukumvitSetMedium'),
trimLines: 2,
colorClickableText: HexColor("7225FF"),
trimMode: TrimMode.Line,
trimCollapsedText: 'More',
trimExpandedText: ' Less',
),
],
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Row(
children: <Widget>[
IconButton(
icon: Icon(
(IconData(
0xe902,
fontFamily: 'heartPost',
)),
color: Colors.purple,
size: 20,
),
iconSize: 30.0,
onPressed: () => print('Like post'),
),
Text(
'2222',
style: TextStyle(
fontSize: 14.0,
fontFamily: 'SukhumvitSetMedium',
fontWeight: FontWeight.w600,
),
),
],
),
SizedBox(width: 10.0),
Row(
children: <Widget>[
IconButton(
icon: Icon(
IconData(0xe901, fontFamily: 'commentPost')),
iconSize: 20.0,
onPressed: () {}),
Text(
'2222',
style: TextStyle(
fontSize: 14.0,
fontFamily: 'SukhumvitSetMedium',
fontWeight: FontWeight.w600,
),
),
],
),
SizedBox(width: 20.0),
Row(
children: <Widget>[
IconButton(
icon: Icon(IconData(0xe906, fontFamily: 'offerPost')),
iconSize: 20.0,
onPressed: () {},
),
Text(
'Offer',
style: TextStyle(
fontSize: 14.0,
fontFamily: 'SukhumvitSetMedium',
fontWeight: FontWeight.w600,
),
),
],
),
],
),
IconButton(
icon: Icon(
(IconData(
0xe908,
fontFamily: 'wishlistPost',
)),
color: Colors.purple,
size: 20,
),
iconSize: 30.0,
onPressed: () => print('Save post'),
),
],
),
),
],
),
);
}

I have a problem adding a Text to a Container

I'm new to flutter and new to programming in general. My problem is I can't add this
child: Align(
alignment: Alignment(0, 48),
child: Text(
'SETS',
style: TextStyle(
fontWeight: FontWeight._(4),
fontSize: 18.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
)),
to this code
class _SetupState extends State<Setup> {
#override
Widget build(BuildContext context) {
return Column(children: [
Align(
alignment: Alignment.topCenter,
child: SizedBox(
height: 350.0,
width: 350.0,
child: Container(
margin: const EdgeInsets.only(top: 6.0),
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Color(0xFFE3E3E3),
),
child: Align(
alignment: Alignment.topCenter,
child: Text(
'SET UP YOUR WORKOUT',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
)),
),
)),
]);
}
}
I tried adding it to the container, making a new align but I still didn't manage to succeed.
Thanks for the help!!
I made a layout based on the image provided in the comments:
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SizedBox(
height: 350.0,
width: 350.0,
child: Container(
margin: const EdgeInsets.only(top: 6.0),
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Color(0xFFE3E3E3),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'SET UP YOUR WORKOUT',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
),
Column(
children: <Widget>[
Text(
'SETS',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(
Icons.add
),
Icon(
Icons.remove
),
],
),
),
],
),
Column(
children: <Widget>[
Text(
'WORKS',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(
Icons.add
),
Icon(
Icons.remove
),
],
),
),
],
),
Column(
children: <Widget>[
Text(
'RESTS',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 16.0,
fontFamily: 'Roboto',
color: Color(0xFF494949)),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(
Icons.add
),
Icon(
Icons.remove
),
],
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: FlatButton(
color: Colors.greenAccent,
child: Text(
'START',
style: TextStyle(
fontSize: 40,
color: Colors.white,
fontWeight: FontWeight.w400
),
),
onPressed: () {
},
shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)),
),
),
],
)
],
),
),
),
),
);
}
I used a Column(let's name it column1) for the whole grey box, and every one of (SETS, +, -), (WORK, +, -), and (RESTS, +, -) is a Column inside the column1. Every (+, -) is a Row wrapped with a Padding. The Padding is used to make the (+, -) become closer to the center of the box.
There are many ways to make such layout, this is only one.
Result:
if that does not work you can first align it the way you want. Then use padding or margin so that you can have it exactly where you want it be.
Container(
padding:
alignment:
child:Text()
)

how to place image on border of card in flutter?

I am new in flutter , I am sharing an image in which there is card and its border has an image (as you can see the date i.e JULY , 2020 is showing inside an image) . I don't have any idea of how to achieve this functionality . Please help me.
I wrote the below code to create the card. The code is displaying the date image inside the card . Do I need to follow some other widget rather than card and listtile?
BoxDecoration myBoxDecoration() {
return BoxDecoration(
color: Colors.grey[100],
border: Border.all(
width: 1, //
// <--- border width here
),
);
}
Widget _myListView(BuildContext context) {
return new ListView.separated(
padding: const EdgeInsets.all(8),
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(0.0),
child:
Column(
children: <Widget>[
Container(
decoration: myBoxDecoration(),
height: 180,
child :
Card(
child: Ink(
color: Colors.grey[200],
child : ListTile(
onTap: () {
},
title: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
child:
Center(child: Text('JULY , 2020' , style: TextStyle(
fontWeight: FontWeight.bold ,
fontSize: 20,
color: Colors.white
),),),
width: 190.0,
height: 30,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/apply_leave.png"),
fit: BoxFit.fill,
// alignment: Alignment.center,
),
),
),
Container(
child:Text('' , style: TextStyle(
fontWeight: FontWeight.bold ,
fontSize: 20,
color: Colors.black
),)
)
]
),
SizedBox(height: 20.0),
Expanded(
child :
Row(
children: <Widget>[
Text('FEE SCEDULE' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
)),
SizedBox(width: 80.0),
Text('JULY-SEPT' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
))
])
),
Expanded(
child :
Row(
children: <Widget>[
Text('DUE DATE' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
)),
SizedBox(width: 105.0),
Text('10-06-2020' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
))
])
),
Expanded(
child :
Row(
children: <Widget>[
Text('END DATE' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
)),
SizedBox(width: 105.0),
Text('19-07-2020' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
))
])
)
]
),
),
),
)
),
Container(
child: Card(
color: Colors.black,
child: Padding(
padding: const EdgeInsets.all(14.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Total Amount:',style: TextStyle(fontWeight: FontWeight.bold , color: Colors.white),),
Text('254684'+'/-',style: TextStyle(fontWeight: FontWeight.bold , color: Colors.white),),
],
),
),
//
),
)
]
)
);
},
separatorBuilder: (BuildContext context,
int index) => const Divider(),
);
}
If I understand you correctly, you want to put an image above the container with border. You can use Stack for it.
Wrap that container in it and put it at the start of children list, that way it will be displayed below an image, and everything else. Use Positioned to rearrange widgets in stack. You may want to wrap stack in Container to position it better.
Feel free to play with values to get the most desired result:
BoxDecoration myBoxDecoration() {
return BoxDecoration(
color: Colors.grey[100],
border: Border.all(
width: 1, //
// <--- border width here
),
);
}
Widget _myListView(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Container(
decoration: myBoxDecoration(),
height: 180,
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Card(
child: Ink(
color: Colors.green[200],
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
child: Text(
'',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.black),
),
),
],
),
SizedBox(height: 20.0),
Expanded(
child: Row(children: <Widget>[
Text('FEE SCEDULE',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
)),
SizedBox(width: 80.0),
Text('JULY-SEPT',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
))
])),
Expanded(
child: Row(
children: <Widget>[
Text('DUE DATE',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
)),
SizedBox(width: 105.0),
Text('10-06-2020',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
))
],
),
),
Expanded(
child: Row(
children: <Widget>[
Text('END DATE',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
)),
SizedBox(width: 105.0),
Text(
'19-07-2020',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
),
)
],
),
)
],
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(3.0),
child: Align(
alignment: Alignment.topLeft,
child: _buildBorderImage(),
),
)
],
),
),
Container(
child: Card(
color: Colors.black,
child: Padding(
padding: const EdgeInsets.all(14.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Total Amount:',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.white),
),
Text(
'254684' + '/-',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.white),
),
],
),
),
//
),
),
],
),
);
}
Container _buildBorderImage() {
return Container(
child: Center(
child: Text(
'JULY , 2020',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20, color: Colors.white),
),
),
width: 190.0,
height: 30,
decoration: BoxDecoration(
color: Colors.green,
// image: DecorationImage(
// image: AssetImage("assets/images/apply_leave.png"),
// fit: BoxFit.fill,
// alignment: Alignment.center,
// ),
),
);
}

How to set icon to topRight

My widget inside row, and I want to set Icon widget possition on topRight but always fail beacuse my Icon always in center possition
I already use
Align(
alignment: Alignment.topRight,
child: Icon(
LineAwesomeIcons.heart,
color: lightColor,
size: 36,
),
)
To force possition but always fail. How to achieve this situation? Icon always be center
My layout
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(
vertical: 14.0,
horizontal: 18.0,
),
margin: EdgeInsets.only(
bottom: 20.0,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.0),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 1.0,
blurRadius: 6.0,
),
],
),
child: Row(
children: <Widget>[
CircleAvatar(
backgroundColor: Color(0xFFD9D9D9),
backgroundImage: NetworkImage(USER_IMAGE),
radius: 36.0,
),
SizedBox(width: 10.0),
Flexible(
child: RichText(
text: TextSpan(
text: widget.status + "\n",
style: TextStyle(
color: Colors.purple,
fontSize: 12,
fontWeight: FontWeight.w400,
height: 1.3,
),
children: <TextSpan>[
TextSpan(
text: widget.name + "\n",
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.w600,
height: 1.3,
),
),
TextSpan(
text: widget.address,
style: TextStyle(
color: Colors.black38,
fontWeight: FontWeight.w400,
fontSize: 14,
),
),
],
),
),
),
SizedBox(width: 10.0),
Icon(
LineAwesomeIcons.heart,
color: lightColor,
size: 36,
)
Align(
alignment: Alignment.topRight,
child: Icon(
LineAwesomeIcons.heart,
color: lightColor,
size: 36,
),
)
],
),
);
}
I want to output like
Try this one
Container(
padding: EdgeInsets.symmetric(
vertical: 14.0,
horizontal: 18.0,
),
margin: EdgeInsets.only(
bottom: 20.0,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.0),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 1.0,
blurRadius: 6.0,
),
],
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
CircleAvatar(
backgroundColor: Color(0xFFD9D9D9),
backgroundImage: NetworkImage('https://banner2.cleanpng.com/20180920/yko/kisspng-computer-icons-portable-network-graphics-avatar-ic-5ba3c66df14d32.3051789815374598219884.jpg'),
radius: 36.0,
),
SizedBox(width: 10.0),
Flexible(
child: RichText(
text: TextSpan(
text: "status\n",
style: TextStyle(
color: Colors.purple,
fontSize: 12,
fontWeight: FontWeight.w400,
height: 1.3,
),
children: <TextSpan>[
TextSpan(
text: "Name \n",
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.w600,
height: 1.3,
),
),
TextSpan(
text: 'Poplar pharma limited Dermatologist San Franscisco CA|5',
style: TextStyle(
color: Colors.black38,
fontWeight: FontWeight.w400,
fontSize: 14,
),
),
],
),
),
),
SizedBox(width: 10.0),
],
),
),
Align(
alignment: Alignment.topCenter,
child: Icon(
Icons.help,
color: Colors.cyan,
size: 36,
),
),
],
),
)
Set crossAxisAlignment to CrossAxisAlignment.start in your Row
Like this
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children : [...]
)
UPDATE
The avatar stays in the center
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
CircleAvatar(),
SizedBox(width: 20),
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("fhfhfj\nufhfhjfhf\njifjifjifj\n",
style: TextStyle(color: Colors.black)),
SizedBox(width: 20),
Icon(Icons.favorite, color: Colors.black),
],
),
],
)

Error while running flutter app

This is the error message which I am getting:
Please do look at it below is my code:
void main(){
runApp(HomePage());
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/dotbg.jpg"),
fit: BoxFit.cover,
),
),
child: Row(
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
'Welcome!',
style: TextStyle(
fontSize: 30.0,
color: Colors.black,
fontWeight: FontWeight.bold),
),
Container(height: 10.0),
RaisedButton(
padding: EdgeInsets.symmetric(
horizontal: 50.0, vertical: 15.0),
textColor: Colors.black,
child: Text(
'Play Online',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
onPressed: () {
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50.0))),
Container(
height: 30.0,
),
RaisedButton(
padding: EdgeInsets.symmetric(
horizontal: 50.0, vertical: 15.0),
textColor: Colors.black,
child: Text(
'Play Offline',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder:(context)=> OfflinePage()),);
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50.0))),
Container(height: 70.0),
Text(
'Copyright#2019 DotsNBoxes',
style: TextStyle(fontSize: 20.0),
),
],
),
)
],
)),
);
}
}
This problem is solved by adding MaterialApp :
void main()
runApp(
MaterialApp(home: HomePage()),
);
}