How to define Custom BorderRadius class in flutter?

135 views Asked by At

to standardize the design and avoid mistakes and reduce build time, I'm trying to define a BorderRadius class that takes a double corner value as an argument so It can be used in many places throughout the app

i'm getting lots of errors with defining the class constructors and can't really get the solution here

import 'package:flutter/material.dart';

class Borderz extends BorderRadius{
  final BorderRadius enBorderz;
  final double corner;
  static const double zeroCorner =  0.0,

 const Borderz({
    @required this.corner,
    this.enBorderz = BorderRadius.only(
              topLeft: Radius.circular(corner),
              topRight: Radius.circular(corner),
              bottomLeft: Radius.circular(corner),
              bottomRight: Radius.circular(zeroCorner),
            )
}) : super(zeroCorner : zeroCorner)
}

some serious fundamental mistake here in this code that makes me feel embarrassed, appreciate your help

1

There are 1 answers

0
chunhunghan On BEST ANSWER

You can copy paste run full code below
You can directly call super.only and no need to use enBorderz

class Borderz extends BorderRadius {
  final double corner;
  static const double zeroCorner = 0.0;

  Borderz({
    @required this.corner,
  }) : super.only(
          topLeft: Radius.circular(corner),
          topRight: Radius.circular(corner),
          bottomLeft: Radius.circular(corner),
          bottomRight: Radius.circular(zeroCorner),
        );
}
...
Container(
      width: 100,
      height: 100,
      child: Center(
        child: Text(
          'test',
        ),
      ),
      decoration: BoxDecoration(
        borderRadius: Borderz(corner: 10.0),
        color: Colors.blue,
      ),
    ),

working demo

enter image description here

full code

import 'package:flutter/material.dart';

class Borderz extends BorderRadius {
  final double corner;
  static const double zeroCorner = 0.0;

  Borderz({
    @required this.corner,
  }) : super.only(
          topLeft: Radius.circular(corner),
          topRight: Radius.circular(corner),
          bottomLeft: Radius.circular(corner),
          bottomRight: Radius.circular(zeroCorner),
        );
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 100,
              height: 100,
              child: Center(
                child: Text(
                  'test',
                ),
              ),
              decoration: BoxDecoration(
                borderRadius: Borderz(corner: 10.0),
                color: Colors.blue,
              ),
            ),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}