Flutter samples Github repo To see the source code for this app, please visit the {value}. SIGN IN Your password was updated on your other device. Please sign in again. Reset the banner Multiple actions Leading Icon DISMISS Back to Gallery Tappable Selectable (long press) Explore Explore {destinationName} Share {destinationName} Top 10 Cities to Visit in Tamil Nadu Number 10 Thanjavur Thanjavur, Tamil Nadu Artisans of Southern India Silk Spinners Chettinad Sivaganga, Tamil Nadu Brihadisvara Temple Temples Gallery Categories A fashionable retail app A content-focused news app A personal finance app Checking Home Savings Car Savings Vacation Annual Percentage Yield Interest Rate Interest YTD Interest Paid Last Year Next Statement Account Owner Total Amount Amount Paid Amount Due Coffee Shops Groceries Restaurants Clothing Total Cap Amount Used Amount Left Manage Accounts Tax Documents Passcode and Touch ID Notifications Personal Information Paperless Settings Find ATMs Help Sign out Total Due Left Accounts Bills Budgets Alerts SEE ALL LEFT OVERVIEW ACCOUNTS BILLS BUDGETS SETTINGS Login to Rally Don't have an account? SIGN UP Username Password Login Remember Me LOGIN Heads up, you’ve used up {percent} of your Shopping budget for this month. You’ve spent {amount} on Restaurants this week. You’ve spent {amount} in ATM fees this month Good work! Your checking account is {percent} higher than last month. {count, plural, =1{Increase your potential tax deduction! Assign categories to 1 unassigned transaction.}other{Increase your potential tax deduction! Assign categories to {count} unassigned transactions.}} See all accounts See all bills See all budgets {accountName} account {accountNumber} with {amount}. {billName} bill due {date} for {amount}. {budgetName} budget with {amountUsed} used of {amountTotal}, {amountLeft} left A personalized travel app STYLES & OTHER Couldn't display URL: Options Info Demo Code API Documentation Full Screen COPY ALL Copied to clipboard. Failed to copy to clipboard: {error} View options Tap here to view available options for this demo. Settings Settings Close settings System Text scaling Small Normal Large Huge Text direction Based on locale LTR RTL Locale Platform mechanics Android iOS Theme Dark Light Slow motion About Flutter Gallery Send feedback Designed by TOASTER in London Bottom app bar Displays navigation and actions at the bottom Bottom app bars provide access to a bottom navigation drawer and up to four actions, including the floating action button. Notch Floating Action Button Position Docked - End Docked - Center Floating - End Floating - Center Banner Displaying a banner within a list A banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). A user action is required for it to be dismissed. Bottom navigation Bottom navigation with cross-fading views Persistent labels Selected label Bottom navigation bars display three to five destinations at the bottom of a screen. Each destination is represented by an icon and an optional text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon. Buttons Flat, raised, outline, and more Flat Button A flat button displays an ink splash on press but does not lift. Use flat buttons on toolbars, in dialogs and inline with padding Raised Button Raised buttons add dimension to mostly flat layouts. They emphasize functions on busy or wide spaces. Outline Button Outline buttons become opaque and elevate when pressed. They are often paired with raised buttons to indicate an alternative, secondary action. Toggle Buttons Toggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container Floating Action Button A floating action button is a circular icon button that hovers over content to promote a primary action in the application. Cards Baseline cards with rounded corners Chips A card is a sheet of Material used to represent some related information, for example an album, a geographical location, a meal, contact details, etc. Compact elements that represent an input, attribute, or action Action Chip Action chips are a set of options which trigger an action related to primary content. Action chips should appear dynamically and contextually in a UI. Choice Chip Choice chips represent a single choice from a set. Choice chips contain related descriptive text or categories. Filter Chip Filter chips use tags or descriptive words as a way to filter content. Input Chip Input chips represent a complex piece of information, such as an entity (person, place, or thing) or conversational text, in a compact form. Data Tables Rows and columns of information Data tables display information in a grid-like format of rows and columns. They organize information in a way that’s easy to scan, so that users can look for patterns and insights. Nutrition Dessert (1 serving) Calories Fat (g) Carbs (g) Protein (g) Sodium (mg) Calcium (%) Iron (%) Frozen yogurt Ice cream sandwich Eclair Cupcake Gingerbread Jelly bean Lollipop Honeycomb Donut Apple pie {value} with sugar {value} with honey Dialogs Simple, alert, and fullscreen Alert An alert dialog informs the user about situations that require acknowledgement. An alert dialog has an optional title and an optional list of actions. Alert With Title Simple A simple dialog offers the user a choice between several options. A simple dialog has an optional title that is displayed above the choices. Grid Lists Row and column layout Grid Lists are best suited for presenting homogeneous data, typically images. Each item in a grid list is called a tile. Image only With header With footer Sliders Widgets for selecting a value by swiping Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters. Range Sliders Sliders reflect a range of values along a bar. They can have icons on both ends of the bar that reflect a range of values. They are ideal for adjusting settings such as volume, brightness, or applying image filters. Custom Sliders Sliders reflect a range of values along a bar, from which users may select a single value or range of values. The sliders can be themed and customized. Continuous with Editable Numerical Value Discrete Discrete Slider with Custom Theme Continuous Range Slider with Custom Theme Continuous Editable numerical value Menu Context menu Sectioned menu Simple menu Checklist menu Menu buttons and simple menus A menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control. Menu item one Menu item two Menu item three One Two Three Four An item with a context menu Context menu item one Disabled menu item Context menu item three An item with a sectioned menu Preview Share Get link Remove Selected: {value} Checked: {value} An item with a simple menu An item with a checklist menu Fullscreen The fullscreenDialog property specifies whether the incoming page is a fullscreen modal dialog Activity indicator iOS-style activity indicators An iOS-style activity indicator that spins clockwise. Buttons iOS-style buttons An iOS-style button. It takes in text and/or an icon that fades out and in on touch. May optionally have a background. Alerts iOS-style alert dialogs Alert An alert dialog informs the user about situations that require acknowledgement. An alert dialog has an optional title, optional content, and an optional list of actions. The title is displayed above the content and the actions are displayed below the content. Alert With Title Alert With Buttons Alert Buttons Only Action Sheet An action sheet is a specific style of alert that presents the user with a set of two or more choices related to the current context. An action sheet can have a title, an additional message, and a list of actions. Navigation bar iOS-style navigation bar An iOS-styled navigation bar. The navigation bar is a toolbar that minimally consists of a page title, in the middle of the toolbar. Pickers iOS-style date and time pickers An iOS-style picker widget that can be used to select dates, times, or both date and time. Timer Date Time Date and Time Pull to refresh iOS-style pull to refresh control A widget implementing the iOS-style pull to refresh content control. Segmented control iOS-style segmented control Used to select between a number of mutually exclusive options. When one option in the segmented control is selected, the other options in the segmented control cease to be selected. Slider iOS-style slider A slider can be used to select from either a continuous or a discrete set of values. Continuous: {value} Discrete: {value} iOS-style switch A switch is used to toggle the on/off state of a single setting. Tab bar iOS-style bottom tab bar An iOS-style bottom navigation tab bar. Displays multiple tabs with one tab being active, the first tab by default. Home Chat Profile Text fields iOS-style text fields A text field lets the user enter text, either with a hardware keyboard or with an onscreen keyboard. PIN Colors All of the predefined colors Color and color swatch constants which represent Material Design's color palette. Typography All of the predefined text styles Definitions for the various typographical styles found in Material Design. 2D transformations Pan, zoom, rotate Tap to edit tiles, and use gestures to move around the scene. Drag to pan, pinch to zoom, rotate with two fingers. Press the reset button to return to the starting orientation. Reset transformations Edit tile BUTTON Bottom sheet Persistent and modal bottom sheets Persistent bottom sheet A persistent bottom sheet shows information that supplements the primary content of the app. A persistent bottom sheet remains visible even when the user interacts with other parts of the app. Modal bottom sheet A modal bottom sheet is an alternative to a menu or a dialog and prevents the user from interacting with the rest of the app. Add SHOW BOTTOM SHEET Header Item {value} Lists Scrolling list layouts A single fixed-height row that typically contains some text as well as a leading or trailing icon. One Line Two Lines Secondary text Progress indicators Linear, circular, indeterminate Circular Progress Indicator A Material Design circular progress indicator, which spins to indicate that the application is busy. Linear Progress Indicator A Material Design linear progress indicator, also known as a progress bar. Pickers Date and time selection Date Picker Shows a dialog containing a Material Design date picker. Time Picker Shows a dialog containing a Material Design time picker. SHOW PICKER Tabs Scrolling Non-scrolling Tabs with independently scrollable views Tabs organize content across different screens, data sets, and other interactions. Snackbars Snackbars show messages at the bottom of the screen Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear. SHOW A SNACKBAR This is a snackbar. ACTION You pressed the snackbar action. Selection controls Checkboxes, radio buttons, and switches Checkbox Checkboxes allow the user to select multiple options from a set. A normal checkbox's value is true or false and a tristate checkbox's value can also be null. Radio Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side. Switch On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Text fields Text fields Single line of editable text and numbers Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. Show password Hide password Please fix the errors in red before submitting. Name is required. Please enter only alphabetical characters. (###) ###-#### - Enter a US phone number. Please enter a password. The passwords don't match What do people call you? Name* Where can we reach you? Phone number* Your email address Email Tell us about yourself (e.g., write down what you do or what hobbies you have) Keep it short, this is just a demo. Life story Salary USD No more than 8 characters. Password* Re-type password* SUBMIT {name} phone number is {phoneNumber} * indicates required field Tooltips Short message displayed on long press or hover Tooltips provide text labels that help explain the function of a button or other user interface action. Tooltips display informative text when users hover over, focus on, or long press an element. Long press or hover to display the tooltip. Comments Calendar Account Alarm Camera Placeholder for {title} tab Create You selected: "{value}" Turn on lights Small Medium Large Elevator Washer Fireplace Biking Discard draft? Use Google's location service? Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running. CANCEL DISCARD DISAGREE AGREE Set backup account Add account SHOW DIALOG Full Screen Dialog SAVE A full screen dialog demo Button With Background Cancel Discard Allow "Maps" to access your location while you are using the app? Your current location will be displayed on the map and used for directions, nearby search results, and estimated travel times. Allow Don't Allow Select Favorite Dessert Please select your favorite type of dessert from the list below. Your selection will be used to customize the suggested list of eateries in your area. Cheesecake Tiramisu Apple Pie Chocolate Brownie Show Alert RED PINK PURPLE DEEP PURPLE INDIGO BLUE LIGHT BLUE CYAN TEAL GREEN LIGHT GREEN LIME YELLOW AMBER ORANGE DEEP ORANGE BROWN GREY BLUE GREY Chennai Tanjore Chettinad Pondicherry Flower Market Bronze Works Market Thanjavur Temple Salt Farm Scooters Silk Maker Lunch Prep Beach Fisherman Starter app A responsive starter layout BUTTON Add Favorite Share Search Title Subtitle Headline Body Item {value} MENU ALL ACCESSORIES CLOTHING HOME LOGOUT Username Password CANCEL NEXT CART Quantity: {quantity} x {price} {quantity, plural, =0{NO ITEMS} =1{1 ITEM} other{{quantity} ITEMS}} CLEAR CART TOTAL Subtotal: Shipping: Tax: Vagabond sack Stella sunglasses Whitney belt Garden strand Strut earrings Varsity socks Weave keyring Gatsby hat Shrug bag Gilt desk trio Copper wire rack Soothe ceramic set Hurrahs tea set Blue stone mug Rainwater tray Chambray napkins Succulent planters Quartet table Kitchen quattro Clay sweater Sea tunic Plaster tunic White pinstripe shirt Chambray shirt Seabreeze sweater Gentry jacket Navy trousers Walter henley (white) Surf and perf shirt Ginger scarf Ramona crossover Classic white collar Cerise scallop tee Shoulder rolls tee Grey slouch tank Sunshirt dress Fine lines tee Search Settings Open menu Close menu Close cart {quantity, plural, =0{Shopping cart, no items} =1{Shopping cart, 1 item} other{Shopping cart, {quantity} items}} Add to cart Remove {product} Remove item Diners Select Date Select Time Select Location Travelers Choose Origin Choose Destination Select Dates {hours, plural, =1{1h} other{{hours}h}} {minutes, plural, =1{1m} other{{minutes}m}} {hoursShortForm} {minutesShortForm} FLY SLEEP EAT Explore Flights by Destination Explore Properties by Destination Explore Restaurants by Destination {numberOfStops, plural, =0{Nonstop} =1{1 stop} other{{numberOfStops} stops}} {totalProperties, plural, =0{No Available Properties} =1{1 Available Properties} other{{totalProperties} Available Properties}} {totalRestaurants, plural, =0{No Restaurants} =1{1 Restaurant} other{{totalRestaurants} Restaurants}} Aspen, United States Big Sur, United States Khumbu Valley, Nepal Machu Picchu, Peru Malé, Maldives Vitznau, Switzerland Mexico City, Mexico Mount Rushmore, United States Singapore Havana, Cuba Cairo, Egypt Lisbon, Portugal Napa, United States Bali, Indonesia Malé, Maldives Aspen, United States Machu Picchu, Peru Havana, Cuba Vitznau, Switzerland Big Sur, United States Napa, United States Porto, Portugal Tulum, Mexico Lisbon, Portugal Cairo, Egypt Taipei, Taiwan Naples, Italy Dallas, United States Córdoba, Argentina Portland, United States Paris, France Seoul, South Korea Seattle, United States Nashville, United States Atlanta, United States Madrid, Spain Lisbon, Portugal Chalet in a snowy landscape with evergreen trees Tent in a field Prayer flags in front of snowy mountain Machu Picchu citadel Overwater bungalows Lake-side hotel in front of mountains Aerial view of Palacio de Bellas Artes Mount Rushmore Supertree Grove Man leaning on an antique blue car Al-Azhar Mosque towers during sunset Brick lighthouse at sea Pool with palm trees Sea-side pool with palm trees Overwater bungalows Chalet in a snowy landscape with evergreen trees Machu Picchu citadel Man leaning on an antique blue car Lake-side hotel in front of mountains Tent in a field Pool with palm trees Colorful apartments at Riberia Square Mayan ruins on a cliff above a beach Brick lighthouse at sea Al-Azhar Mosque towers during sunset Taipei 101 skyscraper Pizza in a wood-fired oven Empty bar with diner-style stools Burger Korean taco Chocolate dessert Artsy restaurant seating area Shrimp dish Bakery entrance Plate of crawfish Cafe counter with pastries Woman holding huge pastrami sandwich Front Page World US Politics Business Tech Science Sports Travel Culture TechDesign Reform HealthcareRevolution GreenArmy Stocks Latest Updates The Quiet, Yet Powerful Healthcare Revolution Divided American Lives During War The Future of Gasoline Reforming The Green Army From Within As Stocks Stagnate, Many Look To Currency Designers Use Tech To Make Futuristic Fabrics Feminists Take On Partisanship Farmland Bees In Short Supply