Reputation: 1049

How to get Dart Flutter floatActionButton bottom right?

I have a screen like this:

I'm trying to place the floatActionButton at the bottom right, but I couldn't.I'm putting the floatActionButton, but I couldn't put it in the bottom right.

How can I put it in the bottom right?

Codes:

Container(
            child: Padding(
              padding: EdgeInsets.only(left: 8, right: 8, bottom: 40),
              child: Column(
                children: [
                  SizedBox(height: 15,),
                  Text("Profile", style: TextStyle(fontSize: 27),),
                  Divider(thickness: 1, color: Colors.black,),
                  SizedBox(height: 5),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text("Solved Tests:",style: TextStyle(fontSize: 19)),
                    ],
                  ),
                  SizedBox(height: 20,),
                  Container(
                    width: double.infinity,
                    height: 200,
                    child: Expanded(
                      child: FutureBuilder(
                      future: listUpload(),
                      builder: (BuildContext context, AsyncSnapshot snapshot) {
                        late List<String?> items;
                        if (!snapshot.hasData){
                          return Text("Not found");
                        }
                        if (snapshot.connectionState == ConnectionState.waiting) {
                        items = [];
                        } else if (snapshot.connectionState == ConnectionState.done &&
                          snapshot.hasData) {
                        items = snapshot.data as List<String?>;
                        } else {
                          items = [];
                        }
                        return Scrollbar(
                          isAlwaysShown: true,
                          controller: _scrollContreller,
                          scrollbarOrientation: ScrollbarOrientation.right,
                          child: ListView.builder(
                            controller: _scrollContreller,
                            itemCount: items.length,
                            itemBuilder: (BuildContext context, int index) {
                              return Padding(
                                padding: const EdgeInsets.only(bottom: 20, left: 10, right: 10),
                                child: Container(
                                  decoration: BoxDecoration(
                                    
                                    color: Colors.grey[300],
                                    borderRadius: BorderRadius.circular(10),
                                  ),
                                  child: ListTile(
                                    title: Text(
                                      items[index].toString(),
                                      style: TextStyle(fontSize: 20),
                                    ),
                                  ),
                                ),
                              );
                            },
                          ),
                        );
                    })),
                  ),
                  Container(
                    decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                  SizedBox(height: 15,),
                  Center(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                      Padding(
                        padding: const EdgeInsets.only(left: 10),
                        child: Container(
                          width: 250,
                          height: 40,
                          child: GFButton(
                            text: "Temizle", textStyle: TextStyle(fontSize: 20, color: Colors.red),
                            color: Colors.red,
                            type: GFButtonType.outline2x,
                            onPressed: () {
                              AlertDialog eminlik = AlertDialog(
                                title: Text("Onay"),
                                content: Text("Çözdüğünüz testlerin kayıtları silinecektir. Emin misiniz?"),
                                actions: [
                                  FlatButton(
                                    child: Text("Evet"),
                                    onPressed: () {
                                      Navigator.pop(context);
                                      setState(() {
                                        eminlikSil();
                                      });
                                    },
                                  ),
                                  FlatButton(
                                    child: Text("Hayır"),
                                    onPressed: () {
                                      Navigator.pop(context);
                                    },
                                  )
                                ],
                              );
                              showDialog(context: context, builder: (context) => eminlik);
                            },
                          ),
                        ),
                      ),
                      
                      ],
                    ),
                      
                  ),
                  // !!!!!!!!!!! <<<<<<<<<
                  // !!!!!!!!!!! <<<<<<<<<
                  FloatingActionButton(
                  child: Text("FAB"),  
                  onPressed: () {}),
                  
                ],
              ),
              
            ),
            
          ),

In the code I provided, I commented out where I put the floatActionButton.I put the codes of the screen in the picture directly. floatActionButton codes are below.

Thanks in advance for the help.

Upvotes: 0

Answers (5)

Ravindra S. Patil

Reputation: 14785

You can set Alignment for use Container or Align Widget .

Using Container:

 Container(
    alignment: Alignment.bottomRight,
    child: FloatingActionButton(
      onPressed: () {},
      child: Icon(
        Icons.add,
      ),
    ),
  ),

Using Align:

Align(
  alignment: Alignment.bottomRight,
  child: Container(
    child: FloatingActionButton(
      hoverColor: Colors.black,
      elevation: 10,
      onPressed: () {},
      child: Icon(
        Icons.add,
      ),
    ),
  ),
),

Using Scaffold:

Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
    );

Result Screen->

Upvotes: 1

Felix

Reputation: 96

Well, if you're using Scaffold, it has floatingActionButton parameter. Where you should put your float, and if it doesn't place it to position you want you can correct it with floatingActionButtonLocation parameter. Example:

Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
)

Otherwise, you can wrap FloatActionButton with Align widget. And give it alignment as you want.

Upvotes: 1

Raouf Rahiche

Reputation: 31356

Looks like you want the achieve the default material design behaviour, in that case use a Scaffold and set the floatingActionButton value

return Scaffold(
  body: , // paste your page content here
  floatingActionButton: FloatingActionButton(
    child: Text("FAB"),
    onPressed: () {},
  ),
);

Your floating action button will placed at the bottom because it's the default behaviour, if you want to change that play with the value of floatingActionButtonLocation

if you don't want to relay on Scaffold use a Stack widget instead

return Stack(
  children: [
    // paste your page content here
    Align(
      alignment: Alignment.bottomRight,
      child: FloatingActionButton(
        child: Text("FAB"),
        onPressed: () {},
      ),
    )
  ],
);

Upvotes: 1

FDuhen

Reputation: 4826

The easiest way to add a FloatingActionButton is to add it directly to your Scaffold.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }

Another solution would be to encapsulate your view in a Stack and to add your FloatingActionButton in an Align.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(children: [
        Container(),
        Align(
          alignment: Alignment.bottomRight,
          child: FloatingActionButton(
            onPressed: () {},
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
        )
      ],)
    );
  }

Upvotes: 1

Robin

Reputation: 5427

You just need to put the floatingActionButton as a named parameter of Scaffold.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Floating Action Button'),
      ),
      body: const Center(child: Text('Press the button below!')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Add your onPressed code here!
        },
        backgroundColor: Colors.green,
        child: const Icon(Icons.add),
      ),
    );
  }

Reference: official flutter documentation

Upvotes: 1

How to get Dart Flutter floatActionButton bottom right?

Answers (5)

Related Questions