Wednesday, March 20, 2019

Floating Button-1: Vertical, Horizontal




Horizontal
==========================================================

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class FancyButton extends StatelessWidget{

  FancyButton({@required this.onPressed});

  final GestureTapCallback onPressed;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RawMaterialButton(
        fillColor: Colors.deepOrange,
        splashColor: Colors.orange,
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 8,
          horizontal: 8),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: const <Widget>[
               Icon(
                Icons.explore,
                color: Colors.amber,
              ),
               SizedBox(width: 8),
               Text("PURCHASE",
              style: TextStyle(color: Colors.white)
              ),
            ],
          ),
        ),
        onPressed: onPressed,
        shape: StadiumBorder(),
    );
  }


}

==========================================================




VERTICAL
==========================================================

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class FancyButton extends StatelessWidget{

  FancyButton({@required this.onPressed});

  final GestureTapCallback onPressed;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RotatedBox(
      quarterTurns: 3,
      child: RawMaterialButton(
          fillColor: Colors.deepOrange,
          splashColor: Colors.orange,
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 8,
            horizontal: 8),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: const <Widget>[
                 Icon(
                  Icons.explore,
                  color: Colors.amber,
                ),
                 SizedBox(width: 8),
                 Text("PURCHASE",
                style: TextStyle(color: Colors.white)
                ),
              ],
            ),
          ),
          onPressed: onPressed,
          shape: StadiumBorder(),
      ),
    );
  }


}


============
NOTE :       quarterTurns: 3 . ---> Range from 0...4

==========================================================

No comments:

Post a Comment