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

Flutter – Padding and decoration

im a UI-Designer who is trying to code with flutter (no experience yet, learning with the internet).

i try to code a segmented control, which shall look like this: enter image description here

After hours i came that far:

 isSelected: isSelected,
                        borderRadius: BorderRadius.circular(12.0),
                        //selectedBorderColor: burple,
                        children: [
                          Container(
                            decoration: ShapeDecoration(
                              color: isSelected[0] == false ? black3 : null,
                              gradient: isSelected[0] == true
                                  ? primaryGradient
                                  : null,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.only(
                                  bottomLeft: Radius.circular(12),
                                  topLeft: Radius.circular(12),
                                  bottomRight: Radius.circular(12),
                                  topRight: Radius.circular(12),
                                ),
                              ),
                            ),
                            width: MediaQuery.of(context).size.width * 0.3,
                            padding: const EdgeInsets.symmetric(horizontal: 24),
                            child: const Center(child: Text('Events')),
                          ),
                          Container(
                            decoration: ShapeDecoration(
                              color: isSelected[1] == false ? black3 : null,
                              gradient: isSelected[1] == true
                                  ? primaryGradient
                                  : null,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.only(
                                    bottomRight: Radius.circular(12),
                                    topRight: Radius.circular(12)),
                              ),
                            ),
                            width: MediaQuery.of(context).size.width * 0.3,
                            padding: const EdgeInsets.symmetric(horizontal: 24),
                            child: const Center(child: Text('Bars')),

But it looks like that:

enter image description here

I dont get the idea on how to add those to inner shadows (to make it look like a 3D-Pill) and How to get the padding between the borders. Sorry for the bad quality, im still fighting with the resolution of android studio.

I tried this, but the shadow is always outside and not inner:

Container(
    decoration: ShapeDecoration(
      color: isSelected[0] == false ? black3 : null,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
      boxShadow: isSelected[0] == true
          ? [
              BoxShadow(
                color: Colors.black.withOpacity(0.4),
                offset: Offset(2.0, 2.0),
                blurRadius: 4.0,
              ),
              BoxShadow(
                color: Colors.white.withOpacity(0.2),
                offset: Offset(-2.0, -2.0),
                blurRadius: 4.0,
              ),
            ]
          : null,
    ),

For the padding i had literally no idea

Tags:

2

Answers


  1. 0

    One way of achieving this using TabBar

    class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});

final String title;

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
late TabController _tabController;

@override
void initState() {
_tabController = TabController(length: 2, vsync: this);
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
  body: Container(
    color: Colors.black87,
    child: Column(
      children: [
        const SizedBox(
          height: 50,
        ),
        Padding(
          padding: const EdgeInsets.all(6.0),
          child: FractionallySizedBox(
            widthFactor: 1,
            child: Container(
              height: 36,
              decoration: BoxDecoration(
                color: Colors.grey,
                borderRadius: BorderRadius.circular(
                  10.0,
                ),
              ),
              child: Padding(
                padding: const EdgeInsets.all(4.0),
                child: TabBar(
                  indicatorSize: TabBarIndicatorSize.tab,
                  dividerColor: Colors.transparent,
                  isScrollable: false,
                  controller: _tabController,
                  labelPadding: EdgeInsets.only(left: 8, right: 8),
                  // give the indicator a decoration (color and border radius)
                  indicator: BoxDecoration(
                    borderRadius: BorderRadius.circular(
                      16.0,
                    ),
                    color: Colors.deepPurpleAccent,
                  ),
                  labelColor: Colors.white,
                  labelStyle: const TextStyle(
                    fontSize: 13,
                    fontWeight: FontWeight.w400,
                  ),
                  unselectedLabelColor: Colors.black45,
                  tabs: const [
                    Tab(
                      text: 'Events',
                    ),
                    Tab(
                      text: 'Bars',
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  ),
);
}
}

    Output

    Login or Signup to reply.
  2. 0

    ‘padding’ is used to add space around the child widget within its parent widget.
    You can wrap main container like this to give shadow as image.

     Container(decoration: BoxDecoration(color: Color(0x1A000000)),
              child: Align(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                   your container with segmented control
                  ),
                ),
              ),
            ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search