Custom widget

Proyektni qilish davomida fayldagi ma'lumotlar ko'payib borgani sari ularni tushunish ham qiyinlashib boradi. Shunda uni qismlarga ajratish kerak bo'ladi.

Hozirgi kodimiz bo'yicha ilovaning matn qismini alohida faylga olib o'tishni o'rganamiz.

lib/ papkasining ichida styled_text.dart faylini yaratamiz. O'z vidjetimiz yozishimiz uchun umumiy namuna quyidagicha bo'ladi.

lib/styled_text.dart

dart

import 'package:flutter/material.dart';

class StyledText extends StatelessWidget {
  StyledText({super.key});

  @override
  Widget build(context) {
    return ...
  }
}

import 'package:flutter/material.dart';

class StyledText extends StatelessWidget {
  StyledText({super.key});

  @override
  Widget build(context) {
    return ...
  }
}

Bu vidjetimizni StyledText deb nomlaymiz va return qismiga lib/main.dart ichidagi matn qismining kodini olib kelamiz. Shunda lib/styled_text.dart quyidagicha ko'rinishga keladi:

lib/styled_text.dart

dart

import 'package:flutter/material.dart';

class StyledText extends StatelessWidget {
  StyledText({super.key});

  @override
  Widget build(context) {
    return Text(
      'Salom Flutter',
      style: TextStyle(
        color: Colors.red,
        fontSize: 24,
        fontWeight: FontWeight.bold,
        fontStyle: FontStyle.italic,
      ),
    );
  }
}

import 'package:flutter/material.dart';

class StyledText extends StatelessWidget {
  StyledText({super.key});

  @override
  Widget build(context) {
    return Text(
      'Salom Flutter',
      style: TextStyle(
        color: Colors.red,
        fontSize: 24,
        fontWeight: FontWeight.bold,
        fontStyle: FontStyle.italic,
      ),
    );
  }
}

Ana endi lib/main.dart faylidagi matn qismiga StyledText vidjetini chaqirib qo'yamiz. Shunda fayllarimiz quyidagicha ko'rinishga keladi.

lib/main.dartlib/styled_text.dart

dart

import 'package:flutter/material.dart';

import 'package:debt_book/styled_text.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});

  @override
  Widget build(context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: double.infinity,
          height: 200,
          color: Colors.amber,
          child: Center(
            child: StyledText(),
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'package:debt_book/styled_text.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});

  @override
  Widget build(context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: double.infinity,
          height: 200,
          color: Colors.amber,
          child: Center(
            child: StyledText(),
          ),
        ),
      ),
    );
  }
}

dart

import 'package:flutter/material.dart';

class StyledText extends StatelessWidget {
  StyledText({super.key});

  @override
  Widget build(context) {
    return Text(
      'Salom Flutter',
      style: TextStyle(
        color: Colors.red,
        fontSize: 24,
        fontWeight: FontWeight.bold,
        fontStyle: FontStyle.italic,
      ),
    );
  }
}

import 'package:flutter/material.dart';

class StyledText extends StatelessWidget {
  StyledText({super.key});

  @override
  Widget build(context) {
    return Text(
      'Salom Flutter',
      style: TextStyle(
        color: Colors.red,
        fontSize: 24,
        fontWeight: FontWeight.bold,
        fontStyle: FontStyle.italic,
      ),
    );
  }
}

Custom widget ​