CODEWITHSUNDEEP
flutterdart
Sultan ul Arefin
Sultan ul Arefin

Reputation: 37

How can I change background color and add custom font into my introduction scene in flutter?

I am creating a quotes app for my practice project in flutter.In the beginning i added a custom text animation as an introduction.I did not create it by myself,as i am a beginner.I took help from The web,while creating that animation.Though it looks fine,it seems very plain and colorless.How can i add Custom font in those text?.And add a coloured background too.

class IntroScreen extends StatefulWidget {
@override
_IntroScreenState createState() => _IntroScreenState();
}

 class _IntroScreenState extends State<IntroScreen> {
 static const _titles = <String>[
"Covid-19 made us \nuneasy",
"Focus on what is \nimportant for you",
"Create a task and \nlet the bubbles pop",
 ];

 Timer timer;
 int index =0;
 @override
 void initState() {
 super.initState();
 timer = Timer.periodic(Duration(seconds:3), (timer){
   if(index< titles.length -1){
     setState(() {
       index++;
     });
   }
   if(index == titles.length -1){
    timer.cancel();
    print("Done");
   }
   });
  }

  @override
  Widget build(BuildContext context) {
  return Material(
  child: Stack(
    children: [
      Center(
        child: AnimatedSwitcher(
          duration: const Duration(milliseconds: 1000),
          child:Text(
            titles[index],
            key:ValueKey(titles[index]),
            textAlign: TextAlign.center,
            style: Theme.of(context).textTheme.headline4,
          ),
        ),
      ),
      Positioned(
        bottom: 34,
         right: 34,
         child: TextButton(onPressed: () {} ,
             child: Text("Skip", style: Theme.of(context).textTheme.headline6),
         ) ,
        )
        ]
        )
        );
        }
        @override
        void dispose(){
        timer.cancel();
        super.dispose();
        }
        }

Upvotes: 0

Views: 287

Answers (1)

Jaimil Patel
Jaimil Patel

Reputation: 1347

You need to download custom font from this link ,then please add this font files in one folder in your project Assign path for that font file into pubspec.yaml file like below.

flutter:
  uses-material-design: true
  fonts:
    - family: Asap
      fonts:
        - asset: fonts/Asap-Regular.ttf
          weight: 400
        - asset: fonts/Asap-Medium.ttf
          weight: 500
        - asset: fonts/Asap-SemiBold.ttf
          weight: 600
        - asset: fonts/Asap-Bold.ttf
          weight: 700

Now you can use this custom font in your project as below.

theme: ThemeData(
         fontFamily: 'Asap',
       ),

Please put above code in Material App Widget.

If you want to use this font only for specific text then you need to use it as below.

style: TextStyle(fontFamily: 'Asap')

For background color you can use color property of material widget.

Upvotes: 1

Related Questions