Rageh Azzazy
Rageh Azzazy

Reputation: 757

How to define Custom BorderRadius class in flutter?

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

Upvotes: 0

Views: 152

Answers (1)

chunhunghan
chunhunghan

Reputation: 54367

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),
      ),
    );
  }
}

Upvotes: 1

Related Questions