Trying to create multiple buttons within a container [Flutter]
254
please try out this and adjust with your requirements
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
final kInnerDecoration = BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(32),
);
final kGradientBoxDecoration = BoxDecoration(
gradient: LinearGradient(
colors: [Colors.yellow.shade600, Colors.orange, Colors.red]),
border: Border.all(color: Colors.amber),
borderRadius: BorderRadius.circular(32),
);
@override
Widget build(BuildContext context) {
print(MediaQuery.of(context).size.height);
print(MediaQuery.of(context).size.width);
return Scaffold(
body: SafeArea(
child: Container(
padding: EdgeInsets.all(20),
child: Stack(
children: [
// This draws the circle with gradient
Positioned(
child: ClipOval(
clipBehavior: Clip.antiAlias,
child: Container(
child: Padding(
padding: const EdgeInsets.all(8.0), //width of the border
child: ClipOval(
clipBehavior: Clip.antiAlias,
child: Container(
width:
240.0, // this width forces the container to be a circle
height:
240.0, // this height forces the container to be a circle
decoration: kInnerDecoration,
),
),
),
decoration: kGradientBoxDecoration,
),
),
),
Positioned(
child: TextButton(onPressed: () {}, child: Text('hi')),
top: -16,
left: 104,
),
Positioned(
child: TextButton(onPressed: () {}, child: Text('hi')),
bottom: -16,
left: 104,
),
Positioned(
child: TextButton(onPressed: () {}, child: Text('hi')),
top: 104,
left: -28,
),
Positioned(
child: TextButton(onPressed: () {}, child: Text('hi')),
top: 104,
right: -28,
),
],
),
),
),
);
}
}
![RealRK](https://i.stack.imgur.com/j1Qtg.jpg?s=256&g=1)
Author by
RealRK
Updated on December 30, 2022Comments
-
RealRK over 1 year
So, I've been trying to create a circle with a thick border and a gradient in the border, which is done successfully using box decoration.
Now I want to make buttons shown in the image in blue in the corners of this container. Any ideas on how to do this? I tried using Positioned in stack, but that didn't work as shown below in the code.
import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( debugShowCheckedModeBanner: false, home: MyApp(), ), ); } class MyApp extends StatelessWidget { final kInnerDecoration = BoxDecoration( color: Colors.white, border: Border.all(color: Colors.white), borderRadius: BorderRadius.circular(32), ); final kGradientBoxDecoration = BoxDecoration( gradient: LinearGradient( colors: [Colors.yellow.shade600, Colors.orange, Colors.red]), border: Border.all(color: Colors.amber), borderRadius: BorderRadius.circular(32), ); @override Widget build(BuildContext context) { print(MediaQuery.of(context).size.height); print(MediaQuery.of(context).size.width); return Scaffold( body: Stack( children: [ Positioned( child: TextButton(onPressed: () {}, child: Text('hi')), top: 2, left: 30, ), // This draws the circle with gradient Positioned( child: ClipOval( clipBehavior: Clip.antiAlias, child: Container( child: Padding( padding: const EdgeInsets.all(8.0), //width of the border child: ClipOval( clipBehavior: Clip.antiAlias, child: Container( width: 240.0, // this width forces the container to be a circle height: 240.0, // this height forces the container to be a circle decoration: kInnerDecoration, ), ), ), decoration: kGradientBoxDecoration, ), ), ), ], ), ); } }