Remote Controller

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.grey.shade900,
        body: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Center(
              child: RemoteController(
                topCenterIcon: Icons.keyboard_arrow_up,
                bottomCenterIcon: Icons.keyboard_arrow_down,
                centerRightIcon: Icons.keyboard_arrow_right,
                centerLeftIcon: Icons.keyboard_arrow_left,
                onTopCenterIconPressed: () {},
                onBottomCenterIconPressed: () {},
                onCenterRightIconPressed: () {},
                onCenterLeftIconPressed: () {},
              ),
            ),
            Center(
              child: RemoteController(
                topCenterIcon: Icons.file_upload,
                bottomCenterIcon: Icons.file_download,
                centerRightIcon: Icons.arrow_right,
                centerLeftIcon: Icons.arrow_left,
                onTopCenterIconPressed: () {},
                onBottomCenterIconPressed: () {},
                onCenterRightIconPressed: () {},
                onCenterLeftIconPressed: () {},
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class RemoteController extends StatefulWidget {
  final IconData topCenterIcon;
  final IconData bottomCenterIcon;
  final IconData centerRightIcon;
  final IconData centerLeftIcon;
  final VoidCallback onTopCenterIconPressed;
  final VoidCallback onBottomCenterIconPressed;
  final VoidCallback onCenterRightIconPressed;
  final VoidCallback onCenterLeftIconPressed;

  const RemoteController({
    Key key,
    this.topCenterIcon,
    this.bottomCenterIcon,
    this.centerRightIcon,
    this.centerLeftIcon,
    this.onTopCenterIconPressed,
    this.onBottomCenterIconPressed,
    this.onCenterRightIconPressed,
    this.onCenterLeftIconPressed,
  }) : super(key: key);

  @override
  _RemoteControllerState createState() => _RemoteControllerState();
}

class _RemoteControllerState extends State<RemoteController> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200.0,
      width: 200.0,
      decoration: BoxDecoration(
        gradient: RadialGradient(
          colors: [Colors.transparent, Colors.white24],
          stops: [0.8, 1],
        ),
        borderRadius: BorderRadius.circular(100.0),
      ),
      child: Stack(
        children: [
          Center(
            child: InkWell(
              onTap: () {},
              borderRadius: BorderRadius.circular(50.0),
              child: Container(
                height: 50.0,
                width: 50.0,
                decoration: BoxDecoration(
                  gradient: RadialGradient(
                    colors: [Colors.transparent, Colors.white24],
                    stops: [0.5, 1],
                  ),
                  borderRadius: BorderRadius.circular(50.0),
                ),
              ),
            ),
          ),
          Align(
            alignment: Alignment.topCenter,
            child: IconButton(
              onPressed: widget.onTopCenterIconPressed,
              color: Colors.white,
              icon: Icon(widget.topCenterIcon),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: IconButton(
              onPressed: widget.onBottomCenterIconPressed,
              color: Colors.white,
              icon: Icon(widget.bottomCenterIcon),
            ),
          ),
          Align(
            alignment: Alignment.centerRight,
            child: IconButton(
              onPressed: widget.onCenterRightIconPressed,
              color: Colors.white,
              icon: Icon(widget.centerRightIcon),
            ),
          ),
          Align(
            alignment: Alignment.centerLeft,
            child: IconButton(
              onPressed: widget.onCenterLeftIconPressed,
              color: Colors.white,
              icon: Icon(widget.centerLeftIcon),
            ),
          ),
        ],
      ),
    );
  }
}