Skip to main content

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.

Follow me on:
 Twitter  Github   LinkedIn

Comments

Post a Comment

Popular posts from this blog

Flutter Development (Day-16): All source code :  Click Here . Sorry for the last two days I haven't posted anything because I am ready to leave my hometown to attend my college.Is there anyone from AndhraPradesh or Tamilnadu .If yes please provide your city name in the comment section. In this post we are going to proceed the next level of our todo app.We are going add animations to our app,Code clean Up and some UI changes. We add the animation to our FloationgActionButton.You may ask why you haven't add animations to others as well? I tried it but it is looking weird. Adding animations to  FloationgActionButton is very much similar to our previous basic animation tutorial. From the next we are going to deal with some of the important widgets which we will be using in further tutorials. 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 t...
4 comments
Read more
Flutter Development (Day-00): This is the First Post from this Blog.This blog will tell you about Flutter.If you don't know about it then the upcoming posts will explain you everything.This is 30 day tutorial which explains about Flutter for absolute beginners. prerequsites:  If you are enthusiastic and Curious. All source code :  Click Here . 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. Follow me on:   Twitter   Github     LinkedIn
6 comments
Read more
Flutter Development (Day-13): In this post we are going to talk about basic animations in Flutter First we start the animation by creating two objects Animation animation, AnimationController animationController. Animation lets us deal with different types of animations like Tween. The tween is something in which you specify the input output range. Here begin is set to -1 and end is 0.0 which means the animation happens from out of the screen to the center of the screen. or rather, from the left most edge to the center of the app. We are also doing an ease in animation, so we specify the curve as fast out slow in. In the initState we provide the animation because the animation should occur when user launches the app.    void initState() {      super.initState();      animationController = AnimationController(        vsync: this,        duration: Duration(       ...
Post a Comment
Read more