Question 76406 in Flutter Question posted in
The official Flutter documentation can be found here.

Two circles touching with lines. How to fit this UI for all type of tabs and screens in flutter?

enter image description here

I need to achieve this programmatically in flutter for all tabs and mobile screens.

Tags:

3

Answers


  1. 0
    • try this.
    
 Transform.scale(
            scale: .5,
            child: const SizedBox(
              width: 100,
              height: 100,
              child: FlutterLogo(),
            ),
  ),
    Login or Signup to reply.
  2. 0

    Try with following basic code, you can customise as your requirement

    Stack(
  children: [
    Container(
      height: 32,
      decoration: BoxDecoration(
        color: Colors.white, borderRadius: BorderRadius.circular(16),
        border: Border.all(color: Colors.tealAccent, width: 2),
      ),
      
    ),Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Container(
          height: 32,
          width: 32,
        margin: const EdgeInsets.all(0),
          decoration: BoxDecoration(
            color: Colors.white, borderRadius: BorderRadius.circular(16),
            border: Border.all(color: Colors.tealAccent, width: 2),
          ),
          alignment: Alignment.center,
          child: const Icon(Icons.arrow_back_ios, size: 24, color: Colors.tealAccent,)),
      Text('Your Text Here'),
      Container(
          height: 32,
          width: 32,
        margin: const EdgeInsets.all(0),
          decoration: BoxDecoration(
            color: Colors.white, borderRadius: BorderRadius.circular(16),
            border: Border.all(color: Colors.tealAccent, width: 2),
          ),
          alignment: Alignment.center,
          child: const Icon(Icons.arrow_forward_ios, size: 24, color: Colors.tealAccent,))
    ],
  )
  ],
)
    Login or Signup to reply.
  3. 0

    U gotta do it manually by fixing the Height. i did one for u.

    
class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 60,
          width: double.infinity,
          child: Stack(
            children: [
              Positioned(
                top: 0,
                bottom: 0,
                left: 40,
                right: 40,
                child: Container(
                  constraints: const BoxConstraints.expand(),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.cyan, width: 2),
                  ),
                  child: const Center(child: Text('Hello man')),
                ),
              ),
              Positioned(
                top: 0,
                left: 0,
                bottom: 0,
                width: 80,
                child: _icon(Icons.arrow_back_ios_new),
              ),
              Positioned(
                top: 0,
                right: 0,
                width: 80,
                bottom: 0,
                child: _icon(Icons.arrow_forward_ios),
              ),
            ],
          ),
        ),
      ),
    );
  }
 
  Widget _icon(IconData icon) => Container(
        constraints: const BoxConstraints.expand(),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.white,
          border: Border.all(color: Colors.cyan, width: 2),
          boxShadow: [
            BoxShadow(
              color: Colors.grey[200]!,
              spreadRadius: 1,
              blurRadius: 20,
            ),
            BoxShadow(
              color: Colors.grey[300]!,
              spreadRadius: 1,
              blurRadius: 20,
            )
          ],
        ),
        child: Icon(
          icon,
          color: Colors.cyan,
        ),
      );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search