how to make a container in flutter with both text and a iconbutton?
I am very new to flutter and i am trying to create a flashcard app The left part is what i need to make
I am trying to make a container and add a text which says title and answer and in the same container i need to set a delete button if anyone wants to delete that flashcard , but to do so i need to child in the same container which is not possible , can anyone help me about how to make a flashcard looking like this in flutter?
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home:Home()
));
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return
Scaffold(
backgroundColor: Colors.deepPurple[600],
appBar:AppBar(
title: Text("FlashCards",style:TextStyle(fontSize: 25.0,fontWeight:FontWeight.bold,color:Colors.black,fontFamily:'ZenDots')),
centerTitle:true,
backgroundColor: Colors.deepOrange开发者_JAVA百科[300],
),
body: Column(
children:<Widget>[
Container(
padding:EdgeInsets.fromLTRB(10,60 ,100,80),
margin:EdgeInsets.all(30.0),
child: Text("Title:- \n\n\n\nAnswer:- ",style:TextStyle(fontFamily:'ZenDots',fontSize:12,))
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Colors.amber,
floatingActionButton
),
),
Container(
child: IconButton(onPressed:null, icon:Icon(Icons.delete,color: Colors.black,)),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Colors.amber,
),
)
],
),
//IconButton(onPressed:null, icon:Icon(Icons.delete)),
floatingActionButton: FloatingActionButton(onPressed:null,
child:Text("+",style:TextStyle(fontSize: 25.0,color: Colors.black)),
backgroundColor: Colors.amber,
),
);
}
}
I have tried doing this , but the delete button comes below the card and i want it on the bottom right corner of the container which says title and answer.
My output :- [This is how i made it](https://i.stack.imgur.com/APDb4.png)
it is because you do not use inside of the column. All you have to do is move it to Column
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home:Home()
));
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return
Scaffold(
backgroundColor: Colors.deepPurple[600],
appBar:AppBar(
title: Text("FlashCards",style:TextStyle(fontSize: 25.0,fontWeight:FontWeight.bold,color:Colors.black,fontFamily:'ZenDots')),
centerTitle:true,
backgroundColor: Colors.deepOrange[300],
),
body: Column(
children:<Widget>[
Container(
padding:EdgeInsets.fromLTRB(10,60 ,100,80),
margin:EdgeInsets.all(30.0),
child: Text("Title:- \n\n\n\nAnswer:- ",style:TextStyle(fontFamily:'ZenDots',fontSize:12,))
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Colors.amber,
floatingActionButton
),
),
Container(
child: IconButton(onPressed:null, icon:Icon(Icons.delete,color: Colors.black,)),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Colors.amber,
),
),
IconButton(onPressed:null, icon:Icon(Icons.delete)),
],
),
floatingActionButton: FloatingActionButton(onPressed:null,
child:Text("+",style:TextStyle(fontSize: 25.0,color: Colors.black)),
backgroundColor: Colors.amber,
),
);
}
}
精彩评论