Scribd
Upload
2 views

flutter_styling_guide

The Flutter Styling Guide provides an overview of various styling options for creating responsive UIs, including container, text, button, and layout styling. It covers key properties and examples for each styling type, such as padding, margin, and decoration for containers, and TextStyle for text. Additionally, it discusses using MediaQuery for responsiveness and defining global themes to maintain consistency across the app's design.

Uploaded by

rtechdevlopment123
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

flutter_styling_guide

The Flutter Styling Guide provides an overview of various styling options for creating responsive UIs, including container, text, button, and layout styling. It covers key properties and examples for each styling type, such as padding, margin, and decoration for containers, and TextStyle for text. Additionally, it discusses using MediaQuery for responsiveness and defining global themes to maintain consistency across the app's design.

Uploaded by

rtechdevlopment123
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Flutter Styling Guide

This PDF contains an overview of various styling options in Flutter, which are useful for designing

beautiful and responsive UIs.

1. Container Styling
- You can style containers with properties like padding, margin, decoration (for borders and

background color), and more.

- Example:

Container(

padding: EdgeInsets.all(16),

margin: EdgeInsets.symmetric(vertical: 10),

decoration: BoxDecoration(

color: Colors.blue,

borderRadius: BorderRadius.circular(12),

boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.1), spreadRadius: 5, blurRadius: 7)],

),

child: Text('Styled Container'),

);

2. Text Styling
- Text can be styled using the TextStyle widget.

- Properties: fontSize, fontWeight, fontFamily, color, letterSpacing, height, and more.

- Example:

Text(

'Styled Text',

style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.blue),


);

3. Button Styling
- Buttons in Flutter can be styled using the ButtonStyle widget.

- Properties: backgroundColor, padding, shape, elevation, and more.

- Example:

ElevatedButton(

onPressed: () {},

child: Text('Click Me'),

style: ButtonStyle(

padding: MaterialStateProperty.all(EdgeInsets.symmetric(vertical: 12, horizontal: 24)),

backgroundColor: MaterialStateProperty.all(Colors.blue),

shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius:

BorderRadius.circular(30))),

),

);

4. Column and Row Styling


- Column and Row help in arranging widgets vertically and horizontally, respectively.

- Properties: mainAxisAlignment, crossAxisAlignment, mainAxisSize.

- Example:

Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

Text('Text 1'),

Text('Text 2'),

],
);

5. BoxDecoration
- BoxDecoration is used for adding decoration to widgets like containers and images.

- Properties: color, borderRadius, border, boxShadow, gradient, and more.

- Example:

Container(

decoration: BoxDecoration(

color: Colors.green,

borderRadius: BorderRadius.circular(12),

boxShadow: [

BoxShadow(color: Colors.black.withOpacity(0.2), spreadRadius: 5, blurRadius: 10),

],

),

child: Text('Styled Box'),

);

6. MediaQuery for Responsiveness


- MediaQuery helps adapt the UI to different screen sizes.

- Example:

double width = MediaQuery.of(context).size.width;

double height = MediaQuery.of(context).size.height;

Text('Width: $width, Height: $height');

7. Themes
- You can define a global theme for your app to keep styling consistent across widgets.

- Example:
ThemeData(

primaryColor: Colors.blue,

textTheme: TextTheme(bodyText1: TextStyle(color: Colors.black)),

buttonTheme: ButtonThemeData(buttonColor: Colors.blue),

);

You might also like