开发者

how to make a container in flutter with both text and a iconbutton?

开发者 https://www.devze.com 2022-12-07 21:25 出处:网络
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 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,

    ),
    );
  }
}
0

精彩评论

暂无评论...
验证码 换一张
取 消