What a Stateless Widget is and How we can use the Extract Widget and Extract Method tools in Flutter?

Gauloran' Alıntı:

Stateless Widget is very important for creating static pages in Flutter. If you will use a static process in your project you should use Stateless Widget for sure. Let's make an example

first we have to import our material

Kod:

import 'package:flutter/material.dart'

in vscode we can easily create our Stateless Widget like this

Kod:

class StatelessLearn extends StatelessWidget {
  const StatelessLearn({super.key});

well we created a class which extends from StatelessWidget and you'll see that we should override the build method

Kod:

 @override
  Widget build(BuildContext context) {
    return Scaffold();

Let's try to add some things in that Scaffold:

Kod:

appBar: AppBar(),
        body: Column(
          children: [
            const TitleTextWidget(
              text: "veli",
            ),
            const TitleTextWidget(
              text: "veli",
            ),
            const TitleTextWidget(
              text: "veli",
            ),
            const TitleTextWidget(
              text: "veli",
            ),
            const TitleTextWidget(
              text: "veli",
            ),

and try to create a SizedBox with height 10 and extract as a method

Kod:

 SizedBox _emptyBox() => const SizedBox(
        height: 10,
      );

and let's create a Container and extract it as a widget

Kod:

class _CustomContainer extends StatelessWidget {
  const _CustomContainer({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Colors.red,
      ),
    );
  }
}

we can do it manually for sure let's try to create a Text widget which extends from StatelessWidget

Kod:

class TitleTextWidget extends StatelessWidget {
  const TitleTextWidget({super.key, required this.text});

  final String? text;

  @override
  Widget build(BuildContext context) {
    return Text("data", style: Theme.of(context).textTheme.displaySmall);
  }
}

and we can use them in our Column

Kod:

 _emptyBox(),
const _CustomContainer(),

in this example we showed what is stateless widget and why we are using it and we used some other widgets to understand it. Thx for reading <3


​

Genişletmek için tıkla ...