Flutter Development (Day-09):
- In this post we are going to talk about some interesting topics in Flutter like
- How to use Custom fonts and Custom Icons in Flutter .
- How to use Themes and change the Theme across different screens and finally
- How to change the view of the Screen based on Orientation like (portrait,LandScape).
- All source code : Click Here.
lib/main.dart:
import 'package:allaboutflutterblog/tuts/customFonts.dart';
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: CustomFonts(),
debugShowCheckedModeBanner: false,
theme: ThemeData(
fontFamily: "Montserrat",
brightness: Brightness.dark,
),
),
);
}
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:random_color/random_color.dart';
class CustomFonts extends StatefulWidget {
@override
_CustomFontsState createState() => _CustomFontsState();
}
class _CustomFontsState extends State<CustomFonts> {
final List _items = List.generate(100, (i) => i + 1);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// FontAwesomeIcon
leading: Icon(FontAwesomeIcons.alignLeft),
title: Text(
"Custom Fonts and Themes",
style: TextStyle(fontSize: 15.0),
),
centerTitle: true,
backgroundColor: Colors.deepPurple,
actions: <Widget>[
// FontAwesomeIcon
Icon(FontAwesomeIcons.search),
],
),
body: OrientationBuilder(
builder: (BuildContext context, orientation) {
return GridView.builder(
itemCount: _items.length,
itemBuilder: (BuildContext context, orientation) {
return Container(
alignment: Alignment.center,
color: RandomColor().randomColor(),
child: Text(
"Grid ${orientation + 1}",
style: TextStyle(color: Colors.white, fontSize: 22.0),
),
);
},
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: orientation == Orientation.portrait ? 2 : 4,
),
);
},
),
);
}
}
pubspec.yaml:
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
http: ^0.12.0+2
random_color: ^1.0.3
font_awesome_flutter: ^8.4.0
dev_dependencies:
flutter_test:
sdk: flutter
fonts:
- family: Montserrat
fonts:
- asset: fonts/montserrat/Montserrat-Regular.ttf
style: italic
Explanation:
- Add font_awesome_flutter 8.4.0 in your pubspec.yaml file Also add custom font.
- Wrap the widget with OrientationBuilder in order to change the view of the screen when the orientation is changed.
- Wrap the root widget with Theme or we can use Themes in the MaterialApp widget.
- If you are following this tutorial / blog please leave your opinion 👀 / say Hii ✋/ Your e-mail in the comment section that I can improve myself and it will gives boost for me to do more tutorials.
- If you have any doubts feel free to ask me in the comment section or email me ramubugudi4@gmail.com I can definetly give reply.
Comments
Post a Comment