How to create a button icons outside its frame?

Viewed 18
1 Answers

Try this:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Material App Bar'),
        ),
        body: const Center(
          child: CustomButton(),
        ),
      ),
    );
  }
}

class CustomButton extends StatelessWidget {
  const CustomButton({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Stack(
          alignment: Alignment.center,
          children: [
            ElevatedButton(
              onPressed: () => print("Hello"), 
              child: Text(
                "Hello",
                style: TextStyle(
                  color: Colors.black54,
                ),
              ),
              style: ElevatedButton.styleFrom(
                fixedSize: Size(150, 30),
                elevation: 10,
                primary: Colors.white,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(15)
                ),
                padding: EdgeInsets.only(left: 30),
              ),

            ),
            Transform.translate(
              offset: Offset(-75,0),
              child: Material(
                elevation: 10,
                shape: CircleBorder(),
                child: Container(
                  width: 50,
                  height: 50,
                  child: FittedBox(

                    child: Icon(
                      Icons.play_arrow,
                      color: Colors.black54,
                      )
                    ),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    shape: BoxShape.circle,
                    
                  ),
                ),
              )
            )
          ],
        )
      ],
    );
  }
}
Related