Category

Flutter

Category

Stadium Border in Flutter : 4 Examples

In this post, you will learn how to make stadium border-shaped widgets in Flutter. Rounded or stadium border type shape will look fresh and different when compared to rectangle-shaped widgets.

So here, you will see enough examples to learn and will get the confidence to make your own one.

What is Stadium Border in Flutter?

stadium border flutter
A border that looks like a stadium-shaped (a rectangle box with semicircles at the ends). StadiumBorder is frequently used with ShapeDecoration to create borders.

Let’s make one…

StadiumBorder Shape Using Container


Container has decoration property. So use this property with ShapeDecoration and make StadiumBorder shape.

          Container(
                padding: EdgeInsets.symmetric(
                  horizontal: 30,
                  vertical: 10,
                ),
                decoration: ShapeDecoration(
                  color: Colors.red,
                  shape: StadiumBorder(),
                ),
                child: Text(
                  'Container',
                  style: TextStyle(
                    fontSize: 15,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),

stadium border in flutter using container
Let’s add a small border to the container. In this example, I have added white color to the border.


 Container(
                padding: EdgeInsets.symmetric(
                  horizontal: 30,
                  vertical: 10,
                ),
                decoration: ShapeDecoration(
                  color: Colors.red,
                  shape: StadiumBorder(
                    side: BorderSide(
                      width: 2,
                      color: Colors.white,
                    ),
                  ),
                ),
                child: Text(
                  'Container',
                  style: TextStyle(
                    fontSize: 15,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),


Let’s make the border a little bit big, add more width inside BorderSide.

              Container(
                padding: EdgeInsets.symmetric(
                  horizontal: 30,
                  vertical: 10,
                ),
                decoration: ShapeDecoration(
                  color: Colors.red,
                  shape: StadiumBorder(
                    side: BorderSide(
                      width: 6,
                      color: Colors.green[200]!,
                    ),
                  ),
                ),
                child: Text(
                  'Container',
                  style: TextStyle(
                    fontSize: 15,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),

StadiumBorder using Container – II

stadium border container outline


   Container(
                padding: EdgeInsets.symmetric(horizontal: 30, vertical: 10),
                decoration: ShapeDecoration(
                  shape: StadiumBorder(
                    side: BorderSide(width: 2, color: Colors.red),
                  ),
                ),
                child: Text(
                  'Container',
                  style: TextStyle(
                    fontSize: 20,
                    color: Colors.red,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),

Stadium Border Using TextButton

textbutton stadiumborder
In this example, you will use TextButton for making StadiumBorder. Use style property with ElevatedButton.styleFrom().


TextButton(
                onPressed: () {},
                child: Text(
                  'TextButton',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                style: ElevatedButton.styleFrom(
                  primary: Colors.red,
                  shape: StadiumBorder(),
                ),
              ),

StadiumBorder Using TextButton II


              TextButton(
                onPressed: () {},
                child: Text(
                  'TextButton',
                  style: TextStyle(
                    color: Colors.red,
                  ),
                ),
                style: ElevatedButton.styleFrom(
                  shape: StadiumBorder(
                    side: BorderSide(
                      width: 2,
                      color: Colors.red,
                    ),
                  ),
                ),
              ),

stadium border flutter
Most of the apps use StadiumBorder like above. Showing trending, hot or new categories on a horizontal list.


   TextButton(
                onPressed: () {},
                child: Text(
                  '#Trending',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                style: ElevatedButton.styleFrom(
                  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                  primary: Colors.red,
                  shape: StadiumBorder(),
                ),
              ),

Let’s show the outline of TextButton with StadiumBorder.


 TextButton(
                onPressed: () {},
                child: Text(
                  '#Trending',
                  style: TextStyle(
                    color: Colors.red,
                  ),
                ),
                style: ElevatedButton.styleFrom(
                  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                  shape: StadiumBorder(
                    side: BorderSide(
                      width: 2,
                      color: Colors.red,
                    ),
                  ),
                ),
              ),

StadiumBorder Using ElevatedButton

stadium border flutter
This time we can use successor of RaisedButton aka ElevatedButton. It also have shape property. Then you know what to do.

     ElevatedButton(
                child: Text("ElevatedButton"),
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  primary: Colors.green,
                  shape: StadiumBorder(),
                ),
              ),


   ElevatedButton(
                child: Text(
                  "ElevatedButton",
                  style: TextStyle(
                    color: Colors.black,
                  ),
                ),
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  primary: Colors.white,
                  shape: StadiumBorder(
                      side: BorderSide(width: 2, color: Colors.green)),
                ),
              ),

StadiumBorder Using OutlinedButton

Just like TextButton and ElevatedButton, you can also create StadiumBorder shape with OutlinedButton.


OutlinedButton(
                child: Text("OutlinedButton"),
                onPressed: () {},
                style: OutlinedButton.styleFrom(
                  side: BorderSide(
                    width: 2,
                    color: Colors.orange,
                  ),
                  shape: StadiumBorder(),
                ),
              ),


Let’s create a Flutter project which contains all above examples.

If you are using Visual Studio – you can create project using Flutter Command and open through Visual Studio.

clear your main.dart file and paste the below code.

  • Column widget is used to show widgets in vertical order.
  • SizedBox widget used to make empty space between widgets.
  • You can remove debug banner using this post.
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stadium Border In Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter StadiumBorder Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              TextButton(
                onPressed: () {},
                child: Text(
                  'TextButton',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                style: ElevatedButton.styleFrom(
                  primary: Colors.red,
                  shape: StadiumBorder(),
                ),
              ),
              TextButton(
                onPressed: () {},
                child: Text(
                  'TextButton',
                  style: TextStyle(
                    color: Colors.red,
                  ),
                ),
                style: ElevatedButton.styleFrom(
                  shape: StadiumBorder(
                    side: BorderSide(
                      width: 2,
                      color: Colors.red,
                    ),
                  ),
                ),
              ),
              TextButton(
                onPressed: () {},
                child: Text(
                  '#Trending',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                style: ElevatedButton.styleFrom(
                  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                  primary: Colors.red,
                  shape: StadiumBorder(),
                ),
              ),
              SizedBox(
                height: 8,
              ),
              TextButton(
                onPressed: () {},
                child: Text(
                  '#Trending',
                  style: TextStyle(
                    color: Colors.red,
                  ),
                ),
                style: ElevatedButton.styleFrom(
                  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                  shape: StadiumBorder(
                    side: BorderSide(
                      width: 2,
                      color: Colors.red,
                    ),
                  ),
                ),
              ),
              SizedBox(
                height: 8,
              ),
              Container(
                padding: EdgeInsets.symmetric(
                  horizontal: 30,
                  vertical: 10,
                ),
                decoration: ShapeDecoration(
                  color: Colors.red,
                  shape: StadiumBorder(),
                ),
                child: Text(
                  'Container',
                  style: TextStyle(
                    fontSize: 15,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              SizedBox(
                height: 8,
              ),
              Container(
                padding: EdgeInsets.symmetric(
                  horizontal: 30,
                  vertical: 10,
                ),
                decoration: ShapeDecoration(
                  color: Colors.red,
                  shape: StadiumBorder(
                    side: BorderSide(
                      width: 6,
                      color: Colors.green[200]!,
                    ),
                  ),
                ),
                child: Text(
                  'Container',
                  style: TextStyle(
                    fontSize: 15,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              SizedBox(
                height: 8,
              ),
              Container(
                padding: EdgeInsets.symmetric(horizontal: 30, vertical: 10),
                decoration: ShapeDecoration(
                  shape: StadiumBorder(
                    side: BorderSide(width: 2, color: Colors.red),
                  ),
                ),
                child: Text(
                  'Container',
                  style: TextStyle(
                    fontSize: 20,
                    color: Colors.red,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              ElevatedButton(
                child: Text("ElevatedButton"),
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  primary: Colors.green,
                  shape: StadiumBorder(),
                ),
              ),
              ElevatedButton(
                child: Text(
                  "ElevatedButton",
                  style: TextStyle(
                    color: Colors.black,
                  ),
                ),
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  primary: Colors.white,
                  shape: StadiumBorder(
                      side: BorderSide(width: 2, color: Colors.green)),
                ),
              ),
              OutlinedButton(
                child: Text("OutlinedButton"),
                onPressed: () {},
                style: OutlinedButton.styleFrom(
                  side: BorderSide(
                    width: 2,
                    color: Colors.orange,
                  ),
                  shape: StadiumBorder(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

That’s all for now. If you like this post, please share it with your family and friends.

Please disable your adblocker or whitelist this site!