Flutter UI Basics

Learn to build beautiful UIs with Flutter and Dart

Building UIs with Flutter & Dart


What is Flutter?


Flutter is a framework for building beautiful, natively compiled applications using Dart. It provides widgets - reusable UI building blocks - to create responsive interfaces.


Widgets: The Building Blocks


A widget is a description of part of the user interface. Everything in Flutter is a widget:

  • Buttons
  • Text
  • Images
  • Layouts
  • Entire screens

    • Widget Types


    Stateless Widgets

    Immutable widgets that don't change after creation. Use for static content.


    ``dar

    class MyButton extends StatelessWidget {

    @override

    Widget build(BuildContext context) {

    return Button(

    onPressed: () => print('Clicked!'),

    child: Text('Click Me'),

    );

    }

    }

    `

    Stateful Widgets

    Widgets that can change over time. Use for interactive content.


    ``dar

    class Counter extends StatefulWidget {

    @override

    State createState() => _CounterState();

    }


    class _CounterState extends State {

    int count = 0;


    @override

    Widget build(BuildContext context) {

    return Column(

    children: [

    Text('Count: $count'),

    Button(

    onPressed: () => setState(() => count++),

    child: Text('Increment'),

    ),

    ],

    );

    }

    }

    `
    Cell2Dart
    // Dart class representing a UI Button class Button { String label = ''; Function? onPressed; Button({required this.label, this.onPressed}); void click() { if (onPressed != null) { onPressed!(); } } } // Create and use a button Button submitBtn = Button( label: 'Submit', onPressed: () => print('Form submitted!') ); submitBtn.click();

    Layout Widgets


    Row

    Arrange children horizontally in a single line.


    ``dar

    Row(

    children: [

    Text('Hello'),

    Text('World'),

    ],

    )

    `

    Column

    Arrange children vertically in a single line.


    ``dar

    Column(

    children: [

    Text('First'),

    Text('Second'),

    ],

    )

    `

    Container

    A box that combines common painting, positioning, and sizing widgets.


    ``dar

    Container(

    width: 200,

    height: 200,

    color: Colors.blue,

    child: Text('Hello'),

    )

    `
    Cell4Dart
    // Dart class representing a Widget class Widget { String name = ''; double width = 0; double height = 0; String color = ''; Widget({ required this.name, this.width = 100, this.height = 100, this.color = 'blue', }); void display() { print('Widget: $name'); print('Size: $width x $height'); print('Color: $color'); } } Widget button = Widget( name: 'Button', width: 150, height: 50, color: 'green' ); button.display();

    Common Flutter Widgets


    Text Widget

    Display text with optional styling.


    Button Widgets

  • ElevatedButton: Raised button with elevation
  • TextButton: Flat text button
  • IconButton: Button with an icon

    • Input Widgets

  • TextField: Text input field
  • Checkbox: Boolean input
  • Slider: Numeric range input

    • Navigation

  • Navigator: Manage routes and screens
  • BottomNavigationBar: Navigate between pages

    • Building a Simple App


    Every Flutter app starts with a Material or Cupertino app:


    ``dar

    void main() {

    runApp(MyApp());

    }


    class MyApp extends StatelessWidget {

    @override

    Widget build(BuildContext context) {

    return MaterialApp(

    home: HomeScreen(),

    );

    }

    }

    `
    Cell6Dart
    // Simple app structure in Dart class App { String name = ''; String theme = ''; App({required this.name, this.theme = 'light'}); } class Screen { String title = ''; List<String> widgets = []; Screen({required this.title}); void addWidget(String widget) { widgets.add(widget); } void display() { print('Screen: $title'); print('Widgets: ${widgets.join(', ')}'); } } // Create app with screens App myApp = App(name: 'My App'); Screen homeScreen = Screen(title: 'Home'); homeScreen.addWidget('Text'); homeScreen.addWidget('Button'); homeScreen.display();

    Key Concepts


    Build Context

    Provides information about where a widget is in the widget tree. Used to:

  • Navigate between screens
  • Access theme data
  • Show dialogs and snackbars

    • State

    Mutable data that can change over time. When state changes:

  • setState() is called
  • Widget rebuilds
  • UI updates automatically

    • Hot Reload

    Flutter feature that updates code without restarting the app. Speeds up development significantly.


    Best Practices


    1. **Use Constants**: Prevent unnecessary rebuilds

    2. **Extract Widgets**: Break large widgets into smaller ones

    3. **Use Meaningful Names**: Make code self-documenting

    4. **Handle Null Safety**: Dart requires explicit null handling

    5. **Test Widgets**: Write tests for UI components

    Run code to see objects and classes in action