xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

Flutter & Scaffold & multiple floatingActionButton

demo

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // home: StateApp(),
      home: Scaffold(
        appBar: AppBar(
          title: Text("appbar"),
          backgroundColor: Colors.blueAccent[700],
        ),
        body: Center(
          child: StateApp(),
        ),
      ),
    );
  }
}

class StateApp extends StatefulWidget {
  StateApp();
  @override
  createState() => _StateAppState();
}

class _StateAppState extends State<StateApp> {
  int _counter = 0;
  // String _randomColor = "#ff00ff";
  Color _randomColor = Colors.lightGreen;
  void _clearCounter() => setState(() {
    // clear
    _counter = 0;
    _randomColor = Colors.lightGreen;
  });
  void _updateCounter() => setState(() {
    _counter++;
    _randomColor = (_counter % 2 == 0) ? Colors.redAccent : Colors.purple;
    // random color
  });
  // _updateCounter() {
  //   setState(() {
  //     _counter++;
  //   });
  // }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // backgroundColor: Colors.lightGreen,
      backgroundColor:  _randomColor,
      body: Center(
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(23.0),
              child: Text(
                'You have pushed the button this many times:',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 18.0,
                ),
              ),
            ),
            Center(
              child: Text(
                '$_counter',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 23.0,
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: Padding(
        // padding: const EdgeInsets.all(8.0),
        padding: const EdgeInsets.only(
          top: 300.0,
        ),
        child: Column(
          children: <Widget>[
            // SpeedDial
            FloatingActionButton(
              onPressed: () async {
                // _counter++;
                print("clicked = $_counter");
                // setState(() {
                //   _counter++;
                // });
                _updateCounter();
              },
              child: Icon(Icons.add),
            ),
            FloatingActionButton(
              onPressed: () async {
                print("clear = $_counter");
                _clearCounter();
              },
              child: Icon(Icons.remove),
            ),
          ],
        ),
      ),
    );
  }
}

refs

https://gist.github.com/duhamelstuff/39a9c24ad1cd1ad376c34bc3aea2ef57#gistcomment-3348355

https://www.youtube.com/watch?v=1FmATI4rOBc

   cupertino_icons: ^0.1.3
  flutter_speed_dial: ^1.2.1

https://www.youtube.com/watch?v=p2xKPvNZeEA

https://medium.com/@RotBolt/test-cef30fcb5c54

https://stackoverflow.com/questions/50839282/how-to-add-multiple-floating-button-in-stack-widget-in-flutter

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---