Debug School

rakesh kumar
rakesh kumar

Posted on

HOW TO CHANGE SIZE AND TEXT COLOR OF THE ELEVATED BUTTONS IN FLUTTER-FLUTTER

Output Screenshot:

SOLUTION
step1:declare variable
 Image description
call function name
Image description
define function name

Image description

Full Code

import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:holidaylandmark/main.dart';
import 'package:intl/intl.dart';

class Experiment extends StatefulWidget {
  Experiment({Key? key}) : super(key: key);

  @override
  State<Experiment> createState() => _ExperimentState();
}

class _ExperimentState extends State<Experiment> {
  final globalTheme = ThemeData(
    primarySwatch: Colors.deepOrange,
    textTheme: const TextTheme(
      bodyText1: TextStyle(
        fontSize: 22,
        height: 1.2,
      ),
      bodyText2: TextStyle(
        color: Colors.blue,
        fontSize: 20,
        fontWeight: FontWeight.bold,
        height: 1.0,
      ),
      caption: TextStyle(
        fontSize: 16,
        fontWeight: FontWeight.bold,
        fontStyle: FontStyle.italic,
        height: 1.2,
      ),
      headline1: TextStyle(
        color: Colors.deepOrange,
        fontFamily: 'Allison',
        fontWeight: FontWeight.bold,
        fontSize: 60,
      ),
      headline2: TextStyle(
        color: Colors.black38,
        fontSize: 30,
        fontWeight: FontWeight.bold,
      ),
    ),
    appBarTheme: const AppBarTheme(
      backgroundColor: Colors.amber,
      // This will control the "back" icon
      iconTheme: IconThemeData(color: Colors.red),
      // This will control action icon buttons that locates on the right
      actionsIconTheme: IconThemeData(color: Colors.blue),
      centerTitle: false,
      elevation: 15,
      titleTextStyle: TextStyle(
        color: Colors.deepPurple,
        fontFamily: 'Allison',
        fontWeight: FontWeight.bold,
        fontSize: 40,
      ),
    ),
  );
  @override
  Widget build(BuildContext context) {
    DateTime now = DateTime.now();
    var item = 40;
    String stringDate = DateFormat('yyyy-MM-dd – kk:mm').format(now);
    return Scaffold(
        //  backgroundColor:globalTheme.backgroundColor,
        appBar: AppBar(
          //  backgroundColor:globalTheme.backgroundColor,
          title: Text(
            'holidaylandmark',
            style: TextStyle(
              fontSize: 23.0,
            ),
          ),
        ),
        body: Center(
          child: Column(
            children: [
              const SizedBox(
                height: 10,
              ),
              Container(
                height: 70,
                width: 70,
                color: Colors.blue[50],
                child: const Align(
                  alignment: Alignment.topCenter,
                  child: FlutterLogo(
                    size: 60,
                  ),
                ),
              ),
              const SizedBox(
                height: 10,
              ),
              Text(
                'Headline 1',
                style: globalTheme.textTheme.headline1,
              ),
              const SizedBox(
                height: 10,
              ),
              Text(
                'Headline 2',
                style: globalTheme.textTheme.headline2,
              ),
              Container(
                margin: const EdgeInsets.all(5),
                padding: const EdgeInsets.all(5),
                child: Text(
                  'Body Text 1: Here goes some introduction about yourself.',
                  style: globalTheme.textTheme.bodyText1,
                ),
              ),
              Container(
                margin: const EdgeInsets.all(5),
                padding: const EdgeInsets.all(5),
                child: Text(
                  'Body Text 2: Here goes some more information regarding your works.',
                  style: TextStyle(
                    fontSize: displayWidth(context) * 0.033,
                    fontWeight: FontWeight.bold,
                    color: getColor(item),
                  ),
                ),
              ),
              Container(
                margin: const EdgeInsets.all(5),
                padding: const EdgeInsets.all(5),
                child: Text(
                  stringDate,
                  style: globalTheme.textTheme.caption,
                ),
              ),
            ],
          ),
        ));
  }

  getColor(item) {
    if (item > 0 && item < 100) return Colors.red;
   if (item >= 100 && item < 200) return Colors.blue;
  }
}

class T {}
Enter fullscreen mode Exit fullscreen mode

output
Image description

SizedBox( // Change the button size
   width: 100,
   height: 50,
   child: ElevatedButton(
      style: ElevatedButton.styleFrom( // ElevatedButton styles
          primary: Colors.deepPurple,
          padding: EdgeInsets.fromLTRB(20, 10, 20, 10), // Some padding example
          shape: RoundedRectangleBorder( // Border
            borderRadius: BorderRadius.circular(18.0),
            side: BorderSide(color: Colors.red),
          ),
          [...]
       ),
       textStyle: TextStyle( // Text styles
          color: Colors.white,
          fontSize: 18,
          overflow: TextOverflow.ellipsis,
          [...]
       ),
       onPressed: () {},
       child: Text("lbs"),
   ),
),
Enter fullscreen mode Exit fullscreen mode 
FlatButton(
            color: Colors.deepPurple[600],
            child: const Text('lbs'),
              textColor: Colors.white10,
            onPressed: () {},
          );
Enter fullscreen mode Exit fullscreen mode 

Widget btn() => OutlinedButton(
      child: const Text(
        'lbs',
        style: TextStyle(color: Colors.white),
      ),
      style: OutlinedButton.styleFrom(
        backgroundColor: Colors.deepPurple[600],
      ),
      onPressed: () {},
    );
Enter fullscreen mode Exit fullscreen mode 
ElevatedButton(
 style: ElevatedButton.styleFrom(
   textStyle: TextStyle(color: Colors.white),
   primary: Colors.purple,
   shape: RoundedRectangleBorder
     borderRadius: BorderRadius.circular(30),
   ),
 ),
);
Enter fullscreen mode Exit fullscreen mode 
SizedBox(
 width: 30,
 height: 20,
 child: ElevatedButton(
  style: ElevatedButton.styleFrom(
   textStyle: TextStyle(color: Colors.white),
   primary: Colors.purple,
  ),
 ),
)
Enter fullscreen mode Exit fullscreen mode 
ElevatedButton(
            onPressed: () {},
            child: Text('kg',
                   style:TextStyle(color:Colors.black,fontSize:18),
                        ),
            style: ButtonStyle(
              backgroundColor:
                  MaterialStateProperty.all<Color>(Colors.deepPurple),
            ),
          );
Enter fullscreen mode Exit fullscreen mode

Full Code

import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:holidaylandmark/main.dart';
import 'package:intl/intl.dart';


class Experiment extends StatefulWidget {
   Experiment({Key? key}) : super(key: key);

  @override
  State<Experiment> createState() => _ExperimentState();
}
class _ExperimentState extends State<Experiment> {
  final globalTheme = ThemeData(
  primarySwatch: Colors.deepOrange,
  textTheme: const TextTheme(
    bodyText1: TextStyle(
      fontSize: 22,
      height: 1.2,
    ),
    bodyText2: TextStyle(
      color: Colors.blue,
      fontSize: 20,
      fontWeight: FontWeight.bold,
      height: 1.0,
    ),
    caption: TextStyle(
      fontSize: 16,
      fontWeight: FontWeight.bold,
      fontStyle: FontStyle.italic,
      height: 1.2,
    ),
    headline1: TextStyle(
      color: Colors.deepOrange,
      fontFamily: 'Allison',
      fontWeight: FontWeight.bold,
      fontSize: 60,
    ),
    headline2: TextStyle(
      color: Colors.black38,
      fontSize: 30,
      fontWeight: FontWeight.bold,
    ),
  ),
  appBarTheme: const AppBarTheme(
    backgroundColor: Colors.amber,
    // This will control the "back" icon
    iconTheme: IconThemeData(color: Colors.red),
    // This will control action icon buttons that locates on the right
    actionsIconTheme: IconThemeData(color: Colors.blue),
    centerTitle: false,
    elevation: 15,
    titleTextStyle: TextStyle(
      color: Colors.deepPurple,
      fontFamily: 'Allison',
      fontWeight: FontWeight.bold,
      fontSize: 40,
    ),
  ),
);
  @override
  Widget build(BuildContext context) {
  DateTime now = DateTime.now();
    String stringDate = DateFormat('yyyy-MM-dd – kk:mm').format(now);
    return Scaffold(
    //  backgroundColor:globalTheme.backgroundColor,       
        appBar: AppBar(
        //  backgroundColor:globalTheme.backgroundColor,
          title: Text(
            'holidaylandmark',
            style: TextStyle(
              fontSize: 23.0,
            ),
          ),
        ),
        body: Center(
      child: Column(
        children: [
          const SizedBox(
            height: 10,
          ),
          Container(
            height: 70,
            width: 70,
            color: Colors.blue[50],
            child: const Align(
              alignment: Alignment.topCenter,
              child: FlutterLogo(
                size: 60,
              ),
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          Text(
            'Headline 1',
            style: globalTheme.textTheme.headline1,
          ),
          const SizedBox(
            height: 10,
          ),
          Text(
            'Headline 2',
            style: globalTheme.textTheme.headline2,
          ),
          Container(
            margin: const EdgeInsets.all(5),
            padding: const EdgeInsets.all(5),
            child: Text(
              'Body Text 1: Here goes some introduction about yourself.',
              style: globalTheme.textTheme.bodyText1,
            ),
          ),
          Container(
            margin: const EdgeInsets.all(5),
            padding: const EdgeInsets.all(5),
            child: Text(
              'Body Text 2: Here goes some more information regarding your works.',
              style: globalTheme.textTheme.bodyText2,
            ),
          ),
          Container(
            margin: const EdgeInsets.all(5),
            padding: const EdgeInsets.all(5),
            child: Text(
              stringDate,
              style: globalTheme.textTheme.caption,
            ),
          ),
          SizedBox( // Change the button size
   width: 100,
   height: 50,
   child: ElevatedButton(
      style: ElevatedButton.styleFrom( // ElevatedButton styles
          primary: Colors.deepPurple,
          padding: EdgeInsets.fromLTRB(20, 10, 20, 10), // Some padding example
          shape: RoundedRectangleBorder( // Border
            borderRadius: BorderRadius.circular(18.0),
            side: BorderSide(color: Colors.red),
          ),
     textStyle: TextStyle( // Text styles
          color: Colors.white,
          fontSize: 18,
          overflow: TextOverflow.ellipsis,

       ),
       ),

       onPressed: () {},
       child: Text("lbs"),
   ),
),
                    Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround ,
                crossAxisAlignment:CrossAxisAlignment.start,
  children: [
        FlatButton(

                color: Colors.deepPurple[600],

                child: const Text('lbs'),

                  textColor: Colors.white,

                onPressed: () {},

              ),
                OutlinedButton(
      child: const Text(
        'lbs',
        style: TextStyle(color: Colors.white),
      ),
      style: OutlinedButton.styleFrom(
        backgroundColor: Colors.deepPurple[600],
      ),
      onPressed: () {},
    ),
  ],
),

    Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround ,
      crossAxisAlignment:CrossAxisAlignment.start,
      children: [
        SizedBox(
 width: 40,
 height: 50,
 child: ElevatedButton(
  style: ElevatedButton.styleFrom(
   textStyle: TextStyle(color: Colors.white),
   primary: Colors.purple,
  ), onPressed: () {  },
  child: null,
 ),
),
SizedBox(
 width: 40,
 height: 50,
 child: ElevatedButton(
            onPressed: () {},
            child: Text('kg',
                   style:TextStyle(color:Colors.white,fontSize:18),
                        ),
            style: ButtonStyle(
              backgroundColor:
                  MaterialStateProperty.all<Color>(Colors.deepPurple),
            ),
          )
)
      ],
    ),

        ],
      ),
    ));
  }
}

class T {}

class T {}
Enter fullscreen mode Exit fullscreen mode

OUTPUT
Image description
Full Summary:

Refrence
Click here

Top comments (0)